.work-grid__intro { max-width: 800px; color: var(--wf-muted); }
.work-grid__filters { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 32px 0; }
.work-grid__filters a { padding: 10px 0; border-bottom: 1px solid var(--wf-grey); }
.work-grid__filters a[aria-current] { color: var(--wf-red); border-color: currentColor; }
.work-grid__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-bottom: 40px; }
.work-grid__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.work-grid__card h3 { font-size: 24px; margin: 20px 0 12px; }
.work-grid__card p { color: var(--wf-muted); }
@media (max-width: 900px) { .work-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .work-grid__items { grid-template-columns: 1fr; } }

.work-grid--row { padding: 48px 0; }
.work-grid--row > .section-shell { display: grid; grid-template-columns: 1fr auto; gap: 24px; border-bottom: 1px solid var(--wf-grey); padding-bottom: 40px; }
.work-grid--row h2 { font-size: clamp(28px, 2.5vw, 40px); margin: 0; }
.work-grid--row .work-grid__items { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.work-grid--row > .section-shell > .button { grid-column: 2; grid-row: 1; align-self: start; color: var(--wf-red); background: white; }
.work-grid__preview { margin: 0; min-width: 0; }
.work-grid__preview img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.work-grid__preview figcaption { padding-top: 16px; text-align: right; font-size: 12px; }
.work-grid__preview a { display: block; }
.work-grid__preview a:focus-visible { outline: 2px solid var(--wf-red); outline-offset: 4px; }
.work-grid--gallery { padding-top: 0; }
.work-grid--gallery .work-grid__items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .work-grid--gallery .work-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.work-grid--row .work-grid__previews { border-top: 1px solid var(--wf-grey); padding-top: 24px; margin-bottom: 0; }
.work-grid--row > .section-shell > .button { border: 1px solid var(--wf-red); border-radius: 999px; }
@media (max-width: 760px) { .work-grid--row .work-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 761px) and (max-width: 1024px) {
 .work-grid--row .work-grid__items, .work-grid--gallery .work-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
 .work-grid--row > .section-shell { gap: 20px 12px; }
 .work-grid--row > .section-shell > .button { padding-inline: 14px; font-size: 14px; }
 .work-grid--row .work-grid__items { gap: 16px; }
}