.ndt-gallery {
    --ndt-component-gap: 0.75rem;
    --ndt-component-control-size: 2.75rem;
    --ndt-component-thumbnail-size: 5rem;
    --ndt-component-focus-width: 2px;
    --ndt-gallery-lightbox-control-size: 3.5rem;
    --ndt-gallery-lightbox-control-background: Canvas;
    --ndt-gallery-lightbox-control-color: CanvasText;
    --ndt-gallery-lightbox-control-border: 1px solid currentColor;
    box-sizing: border-box;
    max-width: 100%;
}

.ndt-gallery *,
.ndt-gallery *::before,
.ndt-gallery *::after {
    box-sizing: inherit;
}

.ndt-gallery__stage {
    margin: 0;
}

.ndt-gallery__open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: zoom-in;
}

.ndt-gallery__image {
    display: block;
    width: 100%;
    max-height: min(75vh, 60rem);
    object-fit: contain;
}

.ndt-gallery__caption {
    margin-block-start: calc(var(--ndt-component-gap) * 0.75);
}

.ndt-gallery__controls {
    display: grid;
    grid-template-columns: minmax(var(--ndt-component-control-size), auto) 1fr minmax(var(--ndt-component-control-size), auto);
    align-items: center;
    gap: var(--ndt-component-gap);
    margin-block-start: var(--ndt-component-gap);
}

.ndt-gallery__status {
    margin: 0;
    text-align: center;
}

.ndt-gallery__thumbnails {
    display: flex;
    gap: calc(var(--ndt-component-gap) * 0.67);
    max-width: 100%;
    margin-block-start: var(--ndt-component-gap);
    padding-block-end: 0.25rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.ndt-gallery__thumbnail {
    flex: 0 0 var(--ndt-component-thumbnail-size);
    width: var(--ndt-component-thumbnail-size);
    height: var(--ndt-component-thumbnail-size);
    padding: 0;
    border: var(--ndt-component-focus-width) solid transparent;
    color: inherit;
    background: transparent;
    cursor: pointer;
    opacity: 0.72;
}

.ndt-gallery__thumbnail:hover,
.ndt-gallery__thumbnail:focus-visible,
.ndt-gallery__thumbnail.is-current {
    opacity: 1;
}

.ndt-gallery__thumbnail.is-current {
    border-color: currentColor;
}

.ndt-gallery__thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ndt-gallery__open:focus-visible,
.ndt-gallery__thumbnail:focus-visible,
.ndt-gallery__previous:focus-visible,
.ndt-gallery__next:focus-visible,
.ndt-gallery__close:focus-visible {
    outline: var(--ndt-component-focus-width) solid currentColor;
    outline-offset: 2px;
}

.ndt-gallery__dialog {
    max-width: min(92vw, 90rem);
    max-height: 92vh;
    padding: var(--ndt-component-gap);
    color: inherit;
}

.ndt-gallery__dialog::backdrop {
    background: rgb(0 0 0 / 72%);
}

.ndt-gallery__dialog img {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 5rem);
    object-fit: contain;
}

.ndt-gallery__close {
    margin-block-end: var(--ndt-component-gap);
}

.ndt-gallery__admin-note {
    margin-block: var(--ndt-component-gap) 0;
    font-size: 0.875em;
}

.ndt-gallery--notice {
    margin-block: var(--ndt-component-gap);
}

.ndt-gallery__header {
    margin-block-end: var(--ndt-gallery-gap, var(--ndt-component-gap));
}

.ndt-gallery__title {
    margin-block: 0 0.35em;
    color: inherit;
    font: inherit;
    font-size: 1.35em;
    font-weight: 600;
}

.ndt-gallery__description > :first-child {
    margin-block-start: 0;
}

.ndt-gallery__description > :last-child {
    margin-block-end: 0;
}

.ndt-gallery__grid {
    display: grid;
    grid-template-columns: repeat(var(--ndt-gallery-columns-desktop, 3), minmax(0, 1fr));
    gap: var(--ndt-gallery-gap, var(--ndt-component-gap));
    min-width: 0;
    max-width: 100%;
}

.ndt-gallery--layout-masonry .ndt-gallery__grid {
    display: block;
    column-count: var(--ndt-gallery-columns-desktop, 3);
    column-gap: var(--ndt-gallery-gap, var(--ndt-component-gap));
}

.ndt-gallery--layout-masonry .ndt-gallery__item {
    break-inside: avoid;
    margin-block-end: var(--ndt-gallery-gap, var(--ndt-component-gap));
}

.ndt-gallery--layout-editorial .ndt-gallery__item:first-child {
    grid-column: 1 / -1;
}

.ndt-gallery__item,
.ndt-gallery__dialog-figure {
    min-width: 0;
    margin: 0;
}

.ndt-gallery__native-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: zoom-in;
}

.ndt-gallery__grid-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.ndt-gallery--aspect-square .ndt-gallery__grid-image {
    aspect-ratio: 1 / 1;
}

.ndt-gallery--aspect-landscape .ndt-gallery__grid-image {
    aspect-ratio: 4 / 3;
}

.ndt-gallery--aspect-portrait .ndt-gallery__grid-image {
    aspect-ratio: 3 / 4;
}

.ndt-gallery--crop-cover .ndt-gallery__grid-image {
    object-fit: cover;
}

.ndt-gallery--crop-contain .ndt-gallery__grid-image {
    object-fit: contain;
}

.ndt-gallery__item-caption {
    display: grid;
    gap: 0.2em;
    margin-block-start: 0.45em;
}

.ndt-gallery__featured {
    display: grid;
    gap: var(--ndt-gallery-gap, var(--ndt-component-gap));
    min-width: 0;
    max-width: 100%;
}

.ndt-gallery--thumbnails-below .ndt-gallery__featured {
    grid-template-areas: "main" "thumbnails";
}

.ndt-gallery--thumbnails-above .ndt-gallery__featured {
    grid-template-areas: "thumbnails" "main";
}

.ndt-gallery--thumbnails-left .ndt-gallery__featured {
    grid-template-areas: "thumbnails main";
    grid-template-columns: minmax(5rem, 7rem) minmax(0, 1fr);
}

.ndt-gallery--thumbnails-right .ndt-gallery__featured {
    grid-template-areas: "main thumbnails";
    grid-template-columns: minmax(0, 1fr) minmax(5rem, 7rem);
}

.ndt-gallery__featured-main {
    grid-area: main;
    min-width: 0;
}

.ndt-gallery__featured-stage {
    min-width: 0;
    margin: 0;
    touch-action: pan-y;
}

.ndt-gallery__featured-stage:focus-visible,
.ndt-gallery__featured-open:focus-visible,
.ndt-gallery__featured-thumbnail:focus-visible,
.ndt-gallery__featured-previous:focus-visible,
.ndt-gallery__featured-next:focus-visible {
    outline: var(--ndt-component-focus-width) solid currentColor;
    outline-offset: 2px;
}

.ndt-gallery__featured-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: zoom-in;
}

.ndt-gallery__featured-image {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: min(75vh, 60rem);
    height: auto;
    object-fit: contain;
}

.ndt-gallery--aspect-square .ndt-gallery__featured-image {
    aspect-ratio: 1 / 1;
}

.ndt-gallery--aspect-landscape .ndt-gallery__featured-image {
    aspect-ratio: 4 / 3;
}

.ndt-gallery--aspect-portrait .ndt-gallery__featured-image {
    aspect-ratio: 3 / 4;
}

.ndt-gallery--crop-cover .ndt-gallery__featured-image {
    object-fit: cover;
}

.ndt-gallery--crop-contain .ndt-gallery__featured-image {
    object-fit: contain;
}

.ndt-gallery__featured-caption {
    display: grid;
    gap: 0.2em;
    margin-block-start: 0.45em;
}

.ndt-gallery__featured-caption[hidden],
.ndt-gallery__featured-caption [hidden] {
    display: none;
}

.ndt-gallery__featured-navigation {
    display: grid;
    grid-template-columns: minmax(var(--ndt-component-control-size), auto) 1fr minmax(var(--ndt-component-control-size), auto);
    align-items: center;
    gap: var(--ndt-component-gap);
    margin-block-start: var(--ndt-component-gap);
}

.ndt-gallery__featured-status {
    text-align: center;
}

.ndt-gallery__featured-thumbnails {
    grid-area: thumbnails;
    display: flex;
    gap: calc(var(--ndt-component-gap) * 0.67);
    min-width: 0;
    max-width: 100%;
    padding: var(--ndt-component-focus-width);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
}

.ndt-gallery--thumbnails-left .ndt-gallery__featured-thumbnails,
.ndt-gallery--thumbnails-right .ndt-gallery__featured-thumbnails {
    flex-direction: column;
    max-height: min(75vh, 60rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-block: contain;
    touch-action: pan-y;
}

.ndt-gallery__featured-thumbnail {
    flex: 0 0 var(--ndt-component-thumbnail-size);
    width: var(--ndt-component-thumbnail-size);
    height: var(--ndt-component-thumbnail-size);
    padding: 0;
    border: var(--ndt-component-focus-width) solid transparent;
    color: inherit;
    background: transparent;
    cursor: pointer;
    opacity: 0.72;
}

.ndt-gallery--thumbnails-left .ndt-gallery__featured-thumbnail,
.ndt-gallery--thumbnails-right .ndt-gallery__featured-thumbnail {
    width: 100%;
}

.ndt-gallery__featured-thumbnail:hover,
.ndt-gallery__featured-thumbnail:focus-visible,
.ndt-gallery__featured-thumbnail.is-current {
    opacity: 1;
}

.ndt-gallery__featured-thumbnail.is-current {
    border-color: currentColor;
}

.ndt-gallery__featured-thumbnail-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ndt-gallery__dialog--native {
    width: min(92vw, 90rem);
    max-height: calc(100dvh - 2rem);
    overflow: auto;
}

.ndt-gallery__dialog-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-block-end: calc(var(--ndt-component-gap) * 0.5);
}

.ndt-gallery__dialog-navigation {
    display: flex;
    justify-content: center;
    margin-block-start: var(--ndt-component-gap);
}

.ndt-gallery__dialog-navigation [data-ndt-native-status] {
    text-align: center;
}

.ndt-gallery__dialog--native img {
    margin-inline: auto;
    max-height: calc(100dvh - 12rem);
}

.ndt-gallery__lightbox-stage {
    position: relative;
    display: grid;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    isolation: isolate;
}

.ndt-gallery__lightbox-stage > img {
    grid-area: 1 / 1;
}

.ndt-gallery :where(.ndt-gallery__lightbox-button) {
    font: inherit;
}

.ndt-gallery :where(.ndt-gallery__lightbox-button--previous, .ndt-gallery__lightbox-button--next) {
    position: absolute;
    z-index: 1;
    inset-block: 0;
    width: min(42%, 18rem);
    min-width: 3.5rem;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
}

.ndt-gallery :where(.ndt-gallery__lightbox-button--previous) {
    inset-inline-start: 0;
}

.ndt-gallery :where(.ndt-gallery__lightbox-button--next) {
    inset-inline-end: 0;
}

.ndt-gallery :where(.ndt-gallery__lightbox-button-icon) {
    position: absolute;
    inset-block-start: 50%;
    display: grid;
    place-items: center;
    width: var(--ndt-gallery-lightbox-control-size);
    min-height: calc(var(--ndt-gallery-lightbox-control-size) * 1.35);
    color: var(--ndt-gallery-lightbox-control-color, CanvasText);
    background: var(--ndt-gallery-lightbox-control-background, Canvas);
    border: var(--ndt-gallery-lightbox-control-border, 1px solid currentColor);
    font-size: 1.65rem;
    line-height: 1;
    opacity: 0.78;
    transition: transform 160ms ease, opacity 160ms ease;
}

.ndt-gallery :where(.ndt-gallery__lightbox-button--previous) .ndt-gallery__lightbox-button-icon {
    inset-inline-start: 0;
    border-radius: 0 999px 999px 0;
    transform: translate(0, -50%);
}

.ndt-gallery :where(.ndt-gallery__lightbox-button--next) .ndt-gallery__lightbox-button-icon {
    inset-inline-end: 0;
    border-radius: 999px 0 0 999px;
    transform: translate(0, -50%);
}

.ndt-gallery :where(.ndt-gallery__lightbox-button--previous, .ndt-gallery__lightbox-button--next):focus {
    outline: none;
}

.ndt-gallery :where(.ndt-gallery__lightbox-button--previous, .ndt-gallery__lightbox-button--next):focus-visible .ndt-gallery__lightbox-button-icon {
    outline: var(--ndt-component-focus-width) solid currentColor;
    outline-offset: 3px;
    opacity: 1;
}

.ndt-gallery :where(.ndt-gallery__lightbox-button--close) {
    min-width: 2.75rem;
    min-height: 2.75rem;
}

.ndt-gallery__visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ndt-gallery__dialog-figure {
    touch-action: pan-y;
}

.ndt-gallery__dialog-caption {
    display: grid;
    gap: 0.25em;
    max-width: 65ch;
    margin-block-start: calc(var(--ndt-component-gap) * 0.67);
    margin-inline: auto;
    text-align: center;
}

.ndt-gallery__dialog-caption[hidden],
.ndt-gallery__dialog-caption [hidden] {
    display: none;
}

.ndt-gallery__native-open:focus-visible,
.ndt-gallery__lightbox-button--close:focus-visible {
    outline: var(--ndt-component-focus-width) solid currentColor;
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .ndt-gallery :where(.ndt-gallery__lightbox-button--previous) .ndt-gallery__lightbox-button-icon {
        opacity: 0;
        transform: translate(-62%, -50%);
    }

    .ndt-gallery :where(.ndt-gallery__lightbox-button--next) .ndt-gallery__lightbox-button-icon {
        opacity: 0;
        transform: translate(62%, -50%);
    }

    .ndt-gallery :where(.ndt-gallery__lightbox-button--previous, .ndt-gallery__lightbox-button--next):is(:hover, :focus-visible) .ndt-gallery__lightbox-button-icon {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

@media (max-width: 64rem) {
    .ndt-gallery__grid {
        grid-template-columns: repeat(var(--ndt-gallery-columns-tablet, 2), minmax(0, 1fr));
    }

    .ndt-gallery--layout-masonry .ndt-gallery__grid {
        column-count: var(--ndt-gallery-columns-tablet, 2);
    }
}

@media (max-width: 48rem) {
    .ndt-gallery--thumbnails-left .ndt-gallery__featured,
    .ndt-gallery--thumbnails-right .ndt-gallery__featured {
        grid-template-columns: minmax(0, 1fr);
    }

    .ndt-gallery--thumbnails-left .ndt-gallery__featured {
        grid-template-areas: "thumbnails" "main";
    }

    .ndt-gallery--thumbnails-right .ndt-gallery__featured {
        grid-template-areas: "main" "thumbnails";
    }

    .ndt-gallery--thumbnails-left .ndt-gallery__featured-thumbnails,
    .ndt-gallery--thumbnails-right .ndt-gallery__featured-thumbnails {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        touch-action: pan-x;
    }

    .ndt-gallery--thumbnails-left .ndt-gallery__featured-thumbnail,
    .ndt-gallery--thumbnails-right .ndt-gallery__featured-thumbnail {
        width: var(--ndt-component-thumbnail-size);
    }
}

@media (max-width: 37.5rem) {
    .ndt-gallery {
        --ndt-component-thumbnail-size: 4rem;
    }

    .ndt-gallery__controls {
        gap: calc(var(--ndt-component-gap) * 0.5);
    }

    .ndt-gallery__grid {
        grid-template-columns: repeat(var(--ndt-gallery-columns-mobile, 1), minmax(0, 1fr));
    }

    .ndt-gallery--layout-masonry .ndt-gallery__grid {
        column-count: var(--ndt-gallery-columns-mobile, 1);
    }

    .ndt-gallery__dialog--native {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
        border: 0;
    }

    .ndt-gallery__dialog--native img {
        max-height: calc(100dvh - 11rem);
    }

    .ndt-gallery :where(.ndt-gallery__lightbox-button--previous, .ndt-gallery__lightbox-button--next) {
        width: 4rem;
    }

    .ndt-gallery :where(.ndt-gallery__lightbox-button-icon) {
        width: 2.75rem;
        min-height: 3.75rem;
        font-size: 1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ndt-gallery * {
        scroll-behavior: auto !important;
    }

    .ndt-gallery__lightbox-button-icon {
        transition: none;
    }
}