.carousel {
    translate: -.25rem 0;
    width: calc(100% + .5rem);
    .carousel__track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        overflow: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        outline: none;
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: .75rem;
        @supports (corner-shape: squircle) {
            corner-shape: squircle;
            border-radius: 1.5rem;
        }
    }
    @media (min-width: 720px) {
        width: 40rem;
        translate: -3rem 0;
        .carousel__track {
            border-radius: 1.5rem;
            @supports (corner-shape: squircle) {
                corner-shape: squircle;
                border-radius: 3rem;
            }
        }
    }
    @media (min-width: 960px) {
        width: 44rem;
        translate: 0 0;
        .carousel__track {
            border-radius: 1.75rem;
            @supports (corner-shape: squircle) {
                corner-shape: squircle;
                border-radius: 3.5rem;
            }
        }
        &.lg, &.md {
            width: 52rem;
            translate: -4rem 0;
            .carousel__track {
                border-radius: 2rem;
                @supports (corner-shape: squircle) {
                    corner-shape: squircle;
                    border-radius: 4rem;
                }
            }
        }
    }
    @media (min-width: 1280px) {
        &.lg {
            width: 70rem;
            translate: -13rem 0;
            .carousel__track {
                border-radius: 2.75rem;
                @supports (corner-shape: squircle) {
                    corner-shape: squircle;
                    border-radius: 5.5rem;
                }
            }
        }
    }
}
.carousel__frame {
    position: relative;
    width: 100%;
}


.carousel__slide {
    scroll-snap-align: start;
    min-width: 0;
    position: relative;
    display: grid;
}

.carousel__slide > :where(img, video, canvas, svg, picture) {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.carousel__slide > :where(video) {
    background: black;
}

.carousel__slide > :where(div) {
    width: 100%;
    height: 100%;
}

.carousel__media {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 0;
    margin: 0;
}

.carousel__img {
    aspect-ratio: 856 / 480;
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.carousel__caption {
    margin: 0;
}

.carousel__chrome {
    margin: 1rem auto;
    padding: .5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px oklch(92% 0.004 286.32);
    border-radius: 1rem;
    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 2rem;
    }
    @media (min-width: 720px) {
        width: fit-content;
        max-width: 100%;
    }
}

.carousel__controls {
    display: contents;
}

.carousel__btn {
    padding: 0;
    font: inherit;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    height: 2rem;
    background-color: transparent;
    transition: background-color .2s;
    cursor: pointer;
    border-radius: .5rem;
    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 1rem;
    }
    &::before {
        content: "";
        display: block;
        width: 1.25rem;
        height: 1.25rem;
        transition: opacity .2s;
        opacity: .6;
        background-size: 1.25rem 1.25rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%2352525B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m12 19-7-7m0 0 7-7m-7 7h14'/%3E%3C/svg%3E");
    }
    span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    @media (hover: none) {
        background-color: oklch(96.7% 0.001 286.375);
        &::before {
            opacity: 1;
        }
    }
    @media not (hover: none) {
        &:hover {
            background-color: oklch(96.7% 0.001 286.375);
            &::before {
                opacity: 1;
            }
        }
    }
    &[data-action="next"] {
        order: 1;
        &::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%2352525B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5 12h14m0 0-7-7m7 7-7 7'/%3E%3C/svg%3E%0A");
        }
    }
    @media (min-width: 720px) {
        flex-grow: 0;
        width: 2rem;
    }
}

.carousel__btn:focus-visible {
    outline: solid 1px oklch(62.3% 0.214 259.815);
    outline-offset: 2px;
}

.carousel__btn[disabled] {
    cursor: default;
    background-color: transparent;
    &::before {
        opacity: .2;
    }
}

  /* 50/50 overlay prev/next buttons */
.carousel__overlayNav {
    aspect-ratio: 16 / 9;
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    z-index: 1;
}

.carousel__overlayBtn {
    appearance: none;
    border: none;
    background: transparent;
    color: inherit;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.carousel__overlayBtn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.carousel__overlayBtn[data-action="prev"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21.879 7.88a3 3 0 1 1 4.242 4.242L17.242 21H38a3 3 0 0 1 3 3l-.004.155A3 3 0 0 1 38 27H17.242l8.88 8.88a3 3 0 0 1 .105 4.13l-.106.112a3 3 0 0 1-4.242 0l-14-14-.2-.222-.052-.07h-.001a3 3 0 0 1-.14-.196l-.132-.22-.046-.094-.018-.038.001-.001c-.004-.008-.038-.077-.062-.136l-.001-.001-.03-.08-.004-.01q0-.004-.003-.007v-.002l-.073-.22-.06-.242c-.009-.043-.013-.079-.016-.098l-.003-.023v-.006A3 3 0 0 1 7 24l.012-.246q.01-.116.026-.214l.005-.034q.004-.03.015-.087l.057-.236q.033-.113.07-.213l.012-.035.033-.087h.001l.04-.09.001-.003c.007-.014.045-.1.085-.175l.001-.001c.021-.039.04-.071.05-.086l.006-.011.004-.006a3 3 0 0 1 .138-.212l.015-.021.01-.013v-.001c.08-.11.179-.23.298-.35z'/%3E%3C/svg%3E%0A") 24 24, w-resize;
    &[disabled] {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none' opacity='0.2' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21.879 7.88a3 3 0 1 1 4.242 4.242L17.242 21H38a3 3 0 0 1 3 3l-.004.155A3 3 0 0 1 38 27H17.242l8.88 8.88a3 3 0 0 1 .105 4.13l-.106.112a3 3 0 0 1-4.242 0l-14-14-.2-.222-.052-.07h-.001a3 3 0 0 1-.14-.196l-.132-.22-.046-.094-.018-.038.001-.001c-.004-.008-.038-.077-.062-.136l-.001-.001-.03-.08-.004-.01q0-.004-.003-.007v-.002l-.073-.22-.06-.242c-.009-.043-.013-.079-.016-.098l-.003-.023v-.006A3 3 0 0 1 7 24l.012-.246q.01-.116.026-.214l.005-.034q.004-.03.015-.087l.057-.236q.033-.113.07-.213l.012-.035.033-.087h.001l.04-.09.001-.003c.007-.014.045-.1.085-.175l.001-.001c.021-.039.04-.071.05-.086l.006-.011.004-.006a3 3 0 0 1 .138-.212l.015-.021.01-.013v-.001c.08-.11.179-.23.298-.35z'/%3E%3C/svg%3E%0A") 24 24, default;
    }
}

.carousel__overlayBtn[data-action="next"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21.879 7.88a3 3 0 0 1 4.242 0l14 14c.12.119.218.24.298.349v.001l.01.013.015.021a2 2 0 0 1 .138.212l.004.006q.002.005.006.01c.01.016.029.048.05.087h0c.041.076.079.162.085.176l.002.002.007.017.033.073v.001c.016.036.027.068.034.087l.012.035.07.213q.032.113.057.236c.008.036.012.068.015.087l.005.034.026.214Q41 23.871 41 24l-.012.247-.026.21-.001.005-.003.023-.016.098c-.033.17-.081.325-.132.462l-.001.002-.003.007-.003.01-.03.08-.002.001c-.024.06-.058.128-.062.136-.007.015-.001.005-.017.039l-.047.094a3 3 0 0 1-.271.416h-.001l-.053.07a3 3 0 0 1-.199.222l-14 14a3 3 0 0 1-4.13.106l-.112-.106a3 3 0 0 1 0-4.243l8.879-8.878H10a3 3 0 0 1-3-3l.004-.155A3 3 0 0 1 10 21h20.758l-8.88-8.878a3 3 0 0 1 0-4.243'/%3E%3C/svg%3E%0A") 24 24, e-resize;
    &[disabled] {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none' opacity='0.2' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21.879 7.88a3 3 0 0 1 4.242 0l14 14c.12.119.218.24.298.349v.001l.01.013.015.021a2 2 0 0 1 .138.212l.004.006q.002.005.006.01c.01.016.029.048.05.087h0c.041.076.079.162.085.176l.002.002.007.017.033.073v.001c.016.036.027.068.034.087l.012.035.07.213q.032.113.057.236c.008.036.012.068.015.087l.005.034.026.214Q41 23.871 41 24l-.012.247-.026.21-.001.005-.003.023-.016.098c-.033.17-.081.325-.132.462l-.001.002-.003.007-.003.01-.03.08-.002.001c-.024.06-.058.128-.062.136-.007.015-.001.005-.017.039l-.047.094a3 3 0 0 1-.271.416h-.001l-.053.07a3 3 0 0 1-.199.222l-14 14a3 3 0 0 1-4.13.106l-.112-.106a3 3 0 0 1 0-4.243l8.879-8.878H10a3 3 0 0 1-3-3l.004-.155A3 3 0 0 1 10 21h20.758l-8.88-8.878a3 3 0 0 1 0-4.243'/%3E%3C/svg%3E%0A") 24 24, default;
    }
}

.carousel__dots {
    display: none;
    @media (min-width: 720px) {
        display: contents;
    }
}

.carousel__dot {
    padding: 0;
    appearance: none;
    border: 0;
    width: 2rem;
    height: 2rem;
    background-color: transparent;
    transition: background-color .2s;
    cursor: pointer;
    border-radius: .5rem;
    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 1rem;
    }
    display: grid;
    place-items: center;
    &::before {
        box-shadow: 0 0 0 1px oklch(87.1% 0.006 286.286);
        background-color: #fff;
        content: "";
        width: .75rem;
        height: .75rem;
        border-radius: .25rem;
        transition: background-color, box-shadow, .2s;
        @supports (corner-shape: squircle) {
            corner-shape: squircle;
            border-radius: .5rem;
        }
    }
    &:focus-visible {
        outline: solid 1px oklch(62.3% 0.214 259.815);
        outline-offset: 2px;
    }
    @media not (hover: none) {
        &:hover {
            background-color: oklch(96.7% 0.001 286.375);
        }
    }
}

.carousel__dot[aria-current="true"] {
    background-color: oklch(62.3% 0.214 259.815);
    &::before {
        box-shadow: 0 0 0 1px #fff;
        background-color: transparent;
    }
}

  /* Fullscreen dialog */
dialog.carousel-dialog {
    border: none;
    padding: 0;
    background: color-mix(in oklab, Canvas 96%, black 4%);
    width: min(1200px, 100vw);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
}

dialog.carousel-dialog::backdrop {
    background: color-mix(in oklab, black 70%, transparent);
}

dialog.carousel-dialog .carousel__frame {
    border-radius: 0;
}

dialog.carousel-dialog .carousel__caption {
    position: absolute;
    inset: auto 0 0 0;
    background: linear-gradient(
        to top,
        color-mix(in oklab, black 55%, transparent),
        transparent
    );
    border-top: none;
    padding: 18px 16px 16px;
    color: white;
}

@media (prefers-reduced-motion: reduce) {
    .carousel__track {
        scroll-behavior: auto;
    }
}