.carousel {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: $color-primary-tertiary20;
    transform: translateZ(0);

    // Slides
    &__slides {
        display: flex;
    }
    :global(picture) {
        position: relative;
        flex: 0 0 100%;
        color: $color-text;
        cursor: pointer;

        & :global(img) {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    // Dots
    &__dots {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        padding: 0 12px;
        background: rgba($color-tertiary, 0.5);
        backdrop-filter: blur(16px);
        border-radius: 100vh;

        @include bp (sm) {
            bottom: 28px;
            height: 40px;
            padding: 0 16px;
        }

        li {
            display: block;
            margin: 0 4px;
        }
        button {
            $color-shadow: rgba(#533331, 0.1);
            position: relative;
            display: block;
            width: 8px;
            height: 8px;
            border-radius: 100%;
            background: #fff;
            padding: 0;
            overflow: hidden;
            box-shadow: 0 1px 1px $color-shadow, 0 2px 2px $color-shadow;
            transform: translateZ(0);

            &:after {
                content: "";
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 125%;
                height: 125%;
                border-radius: 100%;
                background: $color-secondary-light;
                transform: translate3d(-50%, -50%, 0) scale3d(0,0,0);
                transform-origin: 50% 50%;
                transition: transform 1s var(--ease-quart);
            }
        }

        // Active
        .is-active {
            button:after {
                transform: translate3d(-50%, -50%, 0) scale3d(1,1,1);
            }
        }
    }

    // Arrow
    &__arrow {
        $color-shadow: rgba(#000, 0.075);
        display: none;

        // Enable only on devices with hover
        @media (hover: hover) {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            display: block;
            pointer-events: none;
            transform: translate3d(var(--x), var(--y), 0);
            transition: transform 0.6s var(--ease-quart), opacity 0.6s var(--ease-quart);
            transform-origin: 50% 50%;
            filter: drop-shadow(0 2px 2px $color-shadow) drop-shadow(0 8px 8px $color-shadow) drop-shadow(0 16px 16px $color-shadow);
        }

        svg {
            display: block;
            transition: transform 0.6s var(--ease-quart);
        }

        // Flipped for previous direction
        &.is-flipped {
            svg {
                transform: rotate(-180deg);
            }
        }
    }

    // Show arrow on hover
    &:hover {
        .carousel__arrow {
            opacity: 1;
        }
    }
}