/* Expandable Gallery pattern adapted from the free 21st.dev/useLayouts component. */
@media(min-width:901px){
  .portfolio{background:#141a1d;color:#f6f2e9;padding:125px 0 110px}
  .portfolio-head{display:grid;grid-template-columns:190px 1fr auto;align-items:end;margin-bottom:50px}
  .portfolio h2{font-size:clamp(80px,8.6vw,142px);line-height:.84;max-width:920px}
  .portfolio .section-number{color:var(--orange)}
  .filter button{color:#e8e6df;border-color:#7b8281}
  .filter button.active,.filter button:hover{background:var(--orange);border-color:var(--orange);color:#101316}
  .work-grid{display:flex;gap:8px;height:650px}
  .work,.work.large{display:block;flex:1 1 0;min-width:0;min-height:0;height:100%;grid-row:auto;transition:flex .55s cubic-bezier(.22,1,.36,1),filter .4s}
  .work:hover,.work:focus-visible{flex:2.7 1 0;outline:0}
  .work-grid:hover .work:not(:hover){filter:grayscale(.35) brightness(.75)}
  .work img{object-position:center}
  .work-meta{left:19px;bottom:23px}
  .work-meta small{display:none}
  .work-meta strong{font-size:25px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;max-height:330px}
  .work:hover .work-meta strong,.work:focus-visible .work-meta strong{font-size:38px;writing-mode:horizontal-tb;transform:none;white-space:normal;max-height:none}
  .work:hover .work-meta small,.work:focus-visible .work-meta small{display:block}
  .work-plus{right:17px;top:17px;bottom:auto;display:grid;place-items:center;width:36px;height:36px;border:1px solid #fff9;border-radius:50%;background:#1118}
  .source{color:#b4bab7}
}
@media(max-width:900px){
  .portfolio{background:#141a1d;color:#f6f2e9}
  .portfolio .section-number{color:var(--orange)}
  .filter button{color:#f6f2e9;border-color:#8a9290}
  .filter button.active{background:var(--orange);border-color:var(--orange);color:#101316}
  .work-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .work,.work.large{min-height:370px;height:370px}
  .source{color:#b4bab7}
}
@media(max-width:600px){.work-grid{grid-template-columns:1fr}.work,.work.large{height:300px;min-height:300px}.work-meta strong{font-size:32px}}