.fort-studio-grid__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.fort-studio-grid__item{overflow:hidden;border-radius:8px}.fort-studio-grid__item a{color:inherit;text-decoration:none}.fort-studio-grid__image{width:100%;aspect-ratio:302/360;object-fit:cover;transition:transform .35s}.fort-studio-grid__item h3{font-size:17px;margin:12px 0}@media(max-width:1200px){.fort-studio-grid__grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){.fort-studio-grid__grid{grid-template-columns:repeat(2,1fr)}}
.fort-studio-grid__item h3{font-family:var(--fort-font-body);font-weight:600;font-size:17px;text-transform:none;color:var(--fort-navy);margin:6px 0 0}
/* Opt-in "Centre last row": flex rows with equal card widths, an incomplete last row is centred. Default grid is untouched. */
.fort-studio-grid__grid--centre{--fort-studio-cols:4;display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.fort-studio-grid__grid--centre>.fort-studio-grid__item{flex:0 0 calc((100% - (var(--fort-studio-cols) - 1) * 24px) / var(--fort-studio-cols));min-width:0}
@media(max-width:1200px){.fort-studio-grid__grid--centre{--fort-studio-cols:3}}
@media(max-width:640px){.fort-studio-grid__grid--centre{--fort-studio-cols:2}}
/* Opt-in hover video: overlays the image only while playing; the image stays the poster/fallback. */
.fort-studio-grid__media{position:relative;overflow:hidden}
.fort-studio-grid__media .fort-studio-grid__image{display:block}
.fort-studio-grid__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s;pointer-events:none}
.fort-studio-grid__item.is-playing .fort-studio-grid__video{opacity:1}
/* Hover (2026-10-10, only when the widget's "Hover effect" switch is on = .fort-cards-hover): the photo always sits in its own rounded frame, so the zoom stays inside it; card lifts, navy shade + red line, red title with arrow. */
.fort-studio-grid__item{overflow:visible;border-radius:0;transition:transform .3s ease}
.fort-studio-grid__media{position:relative;overflow:hidden;border-radius:12px;isolation:isolate}
.fort-studio-grid__media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(17,32,68,.55),rgba(17,32,68,0) 55%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.fort-studio-grid__media::before{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:2;background:var(--fort-color-red,#a63232);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.fort-studio-grid .fort-studio-grid__image{display:block;border-radius:0;transition:transform .5s ease}
.fort-cards-hover .fort-studio-grid__item:hover{transform:translateY(-4px)}
.fort-cards-hover .fort-studio-grid__item:hover .fort-studio-grid__image{transform:scale(1.04)}
.fort-cards-hover .fort-studio-grid__item:hover .fort-studio-grid__media::after{opacity:1}
.fort-cards-hover .fort-studio-grid__item:hover .fort-studio-grid__media::before{transform:scaleX(1)}
.fort-studio-grid__item h3{margin-top:12px;transition:color .25s}
.fort-cards-hover .fort-studio-grid__item:hover h3{color:var(--fort-color-red,#a63232)}
@media(hover:hover){.fort-studio-grid__item h3::after{content:"→";display:inline-block;margin-left:8px;color:var(--fort-color-red,#a63232);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s}.fort-cards-hover .fort-studio-grid__item:hover h3::after{opacity:1;transform:none}}