.gallery{gap:var(--space-4);grid-template-columns:150px minmax(0,1fr);grid-template-areas:"thumbs stage";display:grid}.gallery__stage{grid-area:stage;min-width:0;position:relative}.gallery__track{border-radius:var(--radius-card);scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;grid-auto-columns:100%;grid-auto-flow:column;margin:0;padding:0;list-style:none;display:grid;overflow-x:auto}.gallery__track::-webkit-scrollbar{display:none}.gallery__slide{scroll-snap-align:start}.gallery__link{cursor:zoom-in;display:block}.gallery__image{aspect-ratio:11/8;object-fit:cover;width:100%}.gallery__arrow{background:color-mix(in srgb, var(--color-white) 85%, transparent);width:44px;height:44px;color:var(--color-red);cursor:pointer;border:0;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.gallery__arrow:hover{background:var(--color-white)}.gallery__arrow[hidden]{display:none}.gallery__arrow--prev{left:var(--space-4)}.gallery__arrow--next{right:var(--space-4)}.gallery__arrow-icon{width:22px;height:22px}.gallery__thumbs{grid-area:thumbs;grid-auto-rows:calc((100% - 2 * var(--space-3)) / 3);gap:var(--space-3);scrollbar-width:thin;height:0;min-height:100%;margin:0;padding:0;list-style:none;display:grid;overflow-y:auto}.gallery__thumbs[hidden]{display:none}.gallery__thumb{border-radius:var(--radius-card);opacity:.7;cursor:pointer;background:0 0;border:2px solid #0000;width:100%;height:100%;padding:0;display:block;overflow:hidden}.gallery__thumb[aria-current=true]{border-color:var(--color-yellow);opacity:1}.gallery__thumb:hover{opacity:1}.gallery__thumb-image{object-fit:cover;width:100%;height:100%}.gallery--single,.gallery:has(.gallery__thumbs[hidden]){grid-template-columns:minmax(0,1fr);grid-template-areas:"stage"}@media (width<=1024px){.gallery{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage""thumbs"}.gallery__thumbs{grid-auto-columns:calc((100% - 4 * var(--space-2)) / 5);gap:var(--space-2);grid-auto-rows:auto;grid-auto-flow:column;height:auto;min-height:0;overflow:auto hidden}.gallery__thumb{aspect-ratio:4/3;height:auto}}@media (width<=767px){.gallery__thumbs{grid-auto-columns:calc((100% - 3 * var(--space-2)) / 4)}}.lightbox{width:100%;max-width:none;height:100%;max-height:none;padding:var(--space-8) var(--space-4) var(--space-4);background:color-mix(in srgb, var(--color-ink) 88%, transparent);color:var(--color-white);border:0;margin:0;position:fixed;inset:0}.lightbox[open]{gap:var(--space-3);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;display:grid}.lightbox::backdrop{background:0 0}.lightbox__bar{padding:var(--space-3) var(--space-4);justify-content:space-between;align-items:center;display:flex;position:absolute;top:0;left:0;right:0}.lightbox__count{font-size:var(--type-small);margin:0}.lightbox__figure{gap:var(--space-3);flex-direction:column;justify-content:center;align-items:center;height:100%;min-height:0;display:flex}.lightbox__image{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:calc(100% - 3em)}.lightbox__caption{font-size:var(--type-small);text-align:center}.lightbox__button{background:color-mix(in srgb, var(--color-white) 12%, transparent);width:48px;height:48px;color:var(--color-white);cursor:pointer;border:0;border-radius:50%;place-items:center;padding:0;display:grid}.lightbox__button:hover{background:color-mix(in srgb, var(--color-white) 25%, transparent)}.lightbox__button[hidden]{display:none}.lightbox__icon{width:26px;height:26px}.lightbox :focus-visible{outline-color:var(--color-white);box-shadow:0 0 0 4px var(--color-ink)}@media (width<=767px){.lightbox[open]{grid-template:"figure figure"minmax(0,1fr)"prev next"/1fr 1fr}.lightbox__figure{grid-area:figure}.lightbox__button--prev{grid-area:prev;justify-self:start}.lightbox__button--next{grid-area:next;justify-self:end}}:where(.photo-grid){margin:0;padding:0;list-style:none}.photo-grid{grid-template-columns:repeat(var(--photo-grid-columns,5), minmax(0, 1fr));gap:var(--space-2);display:grid}.photo-grid--3{--photo-grid-columns:3}.photo-grid--4{--photo-grid-columns:4}.photo-grid__link{border-radius:var(--space-1);cursor:zoom-in;display:block;overflow:hidden}.photo-grid__image{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .3s}.photo-grid__link:hover .photo-grid__image{transform:scale(1.05)}@media (width<=767px){.photo-grid{--photo-grid-columns:3}}
