@layer layouts {
    [data-carousel] {
        --btn-pad: 1%;
        --btn-size: 2em;
        @media screen and (min-width: 45em) {
            --btn-pad: 4%;
            --btn-size: 2.666em;
        }
        position: relative;
        > div {
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            display: flex;
            gap: 4em;
            scrollbar-width: none;
        }
        > div > * {
            flex: 1 0 100%;
            text-align: center;
            scroll-snap-align: center;
            padding-block-end: 0.3em;
        }
        button[class] {
            position: absolute;
            inline-size: var(--btn-size);
            aspect-ratio: 1/1;
            display: grid;
            grid-template-areas: "one";
            place-content: center;
            border: none;
            border-radius: 50%;
            background-color: #1c62ed;
            padding: 0;
            &:disabled {
                cursor: default;
                opacity: 0.5;
            }
        }
        button[class]::before,
        button[class]::after {
            content: "";
            grid-area: one;
            inline-size: 0.52em;
            block-size: 0.125em;
            border-radius: 0.125em;
            background-color: var(--white);
            transform-origin: left;
            transform: translate(-0.03em, 0px);
        }
        button[class]::before {
            rotate: -45deg;
        }
        button[class]::after {
            rotate: 45deg;
        }
        
        .prev {
            inset: 50% auto auto var(--btn-pad);
            /* translate: 50%; */
        }
        .next {
            inset: 50% var(--btn-pad) auto auto;
            rotate: 180deg;
            /* translate: -50%; */
        }
        img {
            border-radius: 0.4em;
        }
        figcaption {
            font-size: 1.31em;
        }
        blockquote {
            font-family: var(--paragraph-italic);
            max-inline-size: 40ch;
            margin-inline: auto;
            margin-block-start: 1em;
            letter-spacing: calc(-1em * 3 / 100);
        }
        blockquote cite {
            display: block;
            font-family: var(--paragraph-medium);
            font-style: normal;
            letter-spacing: normal;
            font-size: 0.75em;
            margin-block-start: 0.66em;
        }
    }
}