.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.gallery-item { display: block; border: 0; padding: 0; color: inherit; background: none; text-align: left; width: 100%; text-decoration: none; }
.gallery-offset { margin-top: 62px; }
.image-wrap { display: block; overflow: hidden; position: relative; aspect-ratio: 3 / 4; }
.image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery-item:hover img { transform: scale(1.035); }
.gallery-item:last-child img { object-position: 50% 12%; }
.image-open { position: absolute; bottom: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; background: #fffaf9e8; border-radius: 50%; font-size: 20px; }
.image-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 16px; }
.image-caption > span:first-child { font: 24px/1.2 var(--display); }
.image-caption > span:last-child { font-size: 9px; color: var(--muted); }
.lightbox { width: min(1100px, 95vw); height: min(920px, 95dvh); max-width: 95vw; max-height: 95dvh; border: 0; padding: 48px 60px 35px; background: var(--dusk); color: white; }
.lightbox[open] { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 16px; }
.lightbox::backdrop { background: #241a24e8; }
.lightbox figure { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.lightbox-image { height: calc(100% - 45px); width: 100%; object-fit: contain; }
.lightbox-caption { font-size: 12px; text-align: center; }
.lightbox button { border: 1px solid #ac879a; background: transparent; color: white; border-radius: 50%; width: 42px; height: 42px; font-size: 24px; }
.lightbox button:focus-visible { outline-color: var(--blush); }
.lightbox-close { position: absolute; top: 10px; right: 12px; }