@layer components {
    .gallery {
        display: grid;
        gap: var(--space-2);
        margin: 0;
    }

    .gallery-frame {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius-l);
        background: var(--haze);
    }

    .gallery-track {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        aspect-ratio: 4 / 3;
        scrollbar-width: thin;
    }

    .gallery-enhanced .gallery-track {
        scrollbar-width: none;
    }

    @media (prefers-reduced-motion: no-preference) {
        .gallery-track {
            scroll-behavior: smooth;
        }
    }

    .gallery-track:focus-visible {
        outline: var(--focus-ring);
        outline-offset: -3px;
    }

    @media (max-width: 1023px) {
        .gallery-track {
            max-block-size: 55vh;
        }
    }

    .gallery-slide {
        position: relative;
        z-index: 0;
        overflow: hidden;
        flex: 0 0 100%;
        scroll-snap-align: center;
        scroll-margin-block-start: calc(var(--header-height) + var(--space-2));
        display: grid;
        place-items: center;
    }

    .gallery-slide img {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        object-fit: contain;
    }

    .gallery-slide .gallery-backdrop {
        object-fit: cover;
        filter: blur(24px) saturate(1.2);
        transform: scale(1.15);
    }

    .gallery-slide-backdropped::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: rgb(36 29 23 / 0.28);
    }

    .gallery-slide .gallery-image {
        z-index: 2;
    }

    .gallery-slide img.cover-fill {
        object-fit: cover;
    }

    .gallery-single .gallery-track {
        overflow: hidden;
    }

    .gallery-arrow {
        position: absolute;
        inset-block-start: 50%;
        translate: 0 -50%;
        z-index: 1;
        display: grid;
        place-items: center;
        min-inline-size: var(--touch-target);
        min-block-size: var(--touch-target);
        border: 0;
        border-radius: var(--radius-round);
        background: rgb(36 29 23 / 0.55);
        color: var(--paper);
        cursor: pointer;
    }

    .gallery-arrow:hover,
    .gallery-arrow:focus-visible {
        background: rgb(36 29 23 / 0.78);
    }

    .gallery-arrow:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    .gallery-arrow-prev {
        inset-inline-start: var(--space-2);
    }

    .gallery-arrow-next {
        inset-inline-end: var(--space-2);
    }

    .gallery-counter {
        position: absolute;
        inset-block-end: var(--space-2);
        inset-inline-end: var(--space-2);
        padding: 2px var(--space-2);
        border-radius: var(--radius-s);
        background: rgb(36 29 23 / 0.65);
        color: var(--paper);
        font-family: var(--font-data);
        font-size: var(--size-micro);
    }

    .gallery-thumbs {
        display: none;
    }

    @media (min-width: 768px) {
        .gallery-thumbs {
            list-style: none;
            margin: 0;
            padding: var(--space-1);
            display: flex;
            gap: var(--space-2);
            overflow-x: auto;
            scrollbar-width: thin;
        }
    }

    .gallery-thumbs a {
        display: block;
        border: 2px solid transparent;
        border-radius: var(--radius-s);
    }

    .gallery-thumbs a[aria-current="true"] {
        border-color: var(--sky);
    }

    .gallery-thumbs a:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    .gallery-thumbs img {
        display: block;
        inline-size: 72px;
        block-size: 54px;
        object-fit: contain;
        border-radius: calc(var(--radius-s) - 1px);
        background: var(--haze);
    }

    .gallery-dialog {
        border: 0;
        padding: 0;
        background: transparent;
        max-inline-size: min(96vw, 1400px);
    }

    .gallery-dialog::backdrop {
        background: rgb(36 29 23 / 0.85);
    }

    .gallery-dialog img {
        display: block;
        inline-size: 100%;
        block-size: auto;
        max-block-size: 90vh;
        object-fit: contain;
        border-radius: var(--radius-m);
    }

    .gallery-dialog-close {
        position: absolute;
        inset-block-start: var(--space-2);
        inset-inline-end: var(--space-2);
        z-index: 1;
        display: grid;
        place-items: center;
        min-inline-size: var(--touch-target);
        min-block-size: var(--touch-target);
        border: 0;
        border-radius: var(--radius-round);
        background: rgb(36 29 23 / 0.55);
        color: var(--paper);
        cursor: pointer;
    }

    .gallery-enhanced .gallery-image {
        cursor: zoom-in;
    }

    .gallery-zoom {
        position: absolute;
        inset-block-start: var(--space-2);
        inset-inline-end: var(--space-2);
        z-index: 1;
        display: grid;
        place-items: center;
        min-inline-size: var(--touch-target);
        min-block-size: var(--touch-target);
        border: 0;
        border-radius: var(--radius-round);
        background: rgb(36 29 23 / 0.55);
        color: var(--paper);
        cursor: pointer;
    }

    .gallery-zoom:hover,
    .gallery-zoom:focus-visible {
        background: rgb(36 29 23 / 0.78);
    }

    .gallery-zoom:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }
}