/**
 * Circle Template — Modulo MEDIA — CSS specifico.
 */

.media-hero { position:relative; min-height:60vh; display:flex; align-items:flex-end; overflow:hidden; padding-top:80px; }
.media-hero__bg { position:absolute; inset:0; background:var(--color-bg); }
.media-hero__overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(12,11,9,.1) 0%,rgba(12,11,9,.95) 100%); }
.media-hero__content { position:relative; z-index:2; padding-bottom:var(--space-12); }

.media-gallery { columns:4; gap:var(--space-3); }
.media-gallery-item { break-inside:avoid; margin-bottom:var(--space-3); border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; display:block; }
.media-gallery-item img { width:100%; display:block; filter:grayscale(15%); transition:filter .4s ease, transform .4s ease; }
.media-gallery-item:nth-child(3n+1) img { aspect-ratio:3/4; }
.media-gallery-item:nth-child(5n+2) img { aspect-ratio:1/1; }
.media-gallery-item img { aspect-ratio:4/3; object-fit:cover; }
.media-gallery-item:hover img { filter:grayscale(0%); transform:scale(1.02); }
@media(max-width:900px){ .media-gallery { columns:3; } }
@media(max-width:600px){ .media-gallery { columns:2; } }