.gallery { padding: 120px 5vw; background: #fff; border-bottom: 1px solid var(--line); }
.gallery-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 42px; }
.gallery-heading h2 { margin: 0; font: 900 clamp(55px, 5.5vw, 84px)/.8 Fraunces, serif; letter-spacing: -.075em; }
.gallery-heading h2 i { font-family: "Permanent Marker", cursive; color: var(--pink); font-size: .8em; font-weight: 400; }
.gallery-heading > p { width: 285px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.gallery-grid { display: grid; grid-template-columns: 1.25fr .85fr .85fr; grid-template-rows: 260px 260px; gap: 12px; position: relative; }
.gallery-card { position: relative; overflow: hidden; margin: 0; background: var(--ink); }
.gallery-card.large { grid-row: span 2; }
.gallery-card.wide { grid-column: span 2; }
.gallery-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.gallery-card:hover img { transform: scale(1.05); }
.gallery-card::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.gallery-card figcaption { position: absolute; z-index: 1; bottom: 16px; left: 16px; right: 16px; color: #fff; font: 500 11px "DM Mono", monospace; display: flex; justify-content: space-between; }
.gallery-card figcaption span { color: var(--yellow); }
.gallery-sticker { position: absolute; right: -34px; top: -35px; z-index: 2; width: 132px; height: 132px; padding-top: 35px; border-radius: 50%; background: var(--yellow); text-align: center; transform: rotate(11deg); font: 500 11px/1.2 "DM Mono", monospace; }
.gallery-sticker b { font-size: 24px; }
.gallery-more { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 12px; }
.gallery-more figure { position: relative; min-height: 265px; margin: 0; overflow: hidden; background: var(--ink); }
.gallery-more img { width: 100%; height: 100%; display: block; position: absolute; inset: 0; object-fit: cover; transition: transform .45s; }
.gallery-more figure:hover img { transform: scale(1.06); }
.gallery-more figcaption { position: absolute; z-index: 1; inset: auto 10px 10px; color: #fff; font: 500 9px/1.3 "DM Mono", monospace; }
.gallery-more figcaption::before { content: ""; position: absolute; inset: -30px -10px -10px; z-index: -1; background: linear-gradient(transparent, rgba(0,0,0,.78)); }
@media (max-width: 800px) { .gallery { padding: 80px 20px; } .gallery-heading { display: block; margin-bottom: 30px; } .gallery-heading > p { width: auto; margin-top: 20px; font-size: 13px; } .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 180px 180px; } .gallery-card.large { grid-row: span 2; } .gallery-card.wide { grid-column: span 2; } .gallery-sticker { width: 105px; height: 105px; top: -26px; right: -27px; padding-top: 27px; font-size: 9px; } .gallery-sticker b { font-size: 20px; } .gallery-more { grid-template-columns: 1fr 1fr; } .gallery-more figure { min-height: 210px; } .gallery-more figure:last-child { grid-column: span 2; } }