.w-carousel {
    --_carousel-item-aspect-ratio: 908/512;
    --_carousel-item-max-width: var(--container-content-column);
    --_carousel-item-width: min(var(--_carousel-item-max-width), 100vw - (var(--gutter) * 2));
    --_carousel-item-gap: 1.25rem;
    --_carousel-item-min-width: var(--_carousel-item-width);
    position: relative;
    display: grid;
    grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--container-content, var(--content-width))) minmax(var(--gutter), 1fr);
    inline-size: 100vw;
    margin-inline-start: calc(50% - 50vw);
    overflow: hidden;
    touch-action: pan-y;
}

.w-carousel__viewport {
    grid-column: 1 / -1;
    grid-row: 1;
    overflow: visible;
}

.w-carousel__track {
    display: flex;
    gap: var(--_carousel-item-gap);
    inline-size: max-content;
    padding-inline-start: max(var(--gutter), calc((100vw - var(--container-content, var(--content-width))) / 2));
    transition: transform 0.45s var(--easing-snappy, cubic-bezier(0.22, 1, 0.36, 1));
    will-change: transform;
}

.w-carousel[data-dragging] .w-carousel__track {
    cursor: grabbing;
}

.w-carousel__item {
    position: relative;
    flex: 0 0 var(--_carousel-item-width);
    inline-size: var(--_carousel-item-width);
    margin: 0;
    user-select: none;
}

.w-carousel__item > figcaption {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.24s ease 0.08s, transform 0.24s ease 0.08s, visibility 0.24s ease 0.08s;
}

.w-carousel__item:not([data-active]) > figcaption {
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
    visibility: hidden;
    transition-delay: 0s;
}

.w-carousel__item img {
    pointer-events: none;
}

.w-carousel__item img,
.w-carousel__item video,
.w-carousel__media-placeholder {
    aspect-ratio: var(--_carousel-item-aspect-ratio, auto);
    inline-size: 100%;
}

.w-carousel__item img,
.w-carousel__item video {
    object-fit: cover;
    display: block;
}

.w-carousel__nav {
    grid-row: 1;
    block-size: 100%;
    inline-size: 100%;
    min-block-size: 0;
    margin: auto;
    padding: var(--gutter) 0;
    border: 0;
    background: transparent;
    color: var(--color-black);
    cursor: pointer;
    opacity: 0;
    position: relative;
}

.w-carousel__nav > svg {
    width: min(50%, 2rem);
    height: auto;
}

.w-carousel__nav:hover,
.w-carousel__nav:focus-visible {
    opacity: 1;
}

.w-carousel__nav--prev {
    grid-column: 1;
    justify-content: start;
    padding-inline-start: min(2.5dvw, var(--gutter));
}

.w-carousel__nav--next {
    grid-column: 3;
    justify-content: end;
    padding-inline-end: min(2.5dvw, var(--gutter));
}

.w-carousel__dots {
    max-width: var(--_carousel-item-max-width);
    width: 100%;
}

.w-carousel__dot {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    min-height: 0;
    padding: 0.125rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--color-gray-600);
    background-clip: content-box;
    cursor: pointer;
    transition: padding 0.15s ease;
}

.w-carousel__dot[data-active] {
    background-color: var(--color-theme-primary);
    padding: 0;
}

@media (prefers-reduced-motion: reduce) {
    .w-carousel__item > figcaption {
        transform: none;
        transition: opacity 0.01s linear, visibility 0.01s linear;
    }
}