.product-card-scrollable {
    --min-width: 19.375rem;
    --gap: var(--gutter, 1.5rem);
    container: product-card-wrapper / inline-size;
    display: grid;
    gap: 1.5rem var(--gap);
    grid-template-columns: 3rem 1fr 3rem;
}

.carousel-container {
    container: product-card-scroller / inline-size;
}

.carousel {
    display: grid;
    grid-auto-columns: var(--min-width);
    grid-auto-flow: column;
    grid-template-rows: [thumbnail] auto [title] auto [summary] auto [link] auto;
    gap: 1.5rem var(--gap);
    /* scrolling */
    overflow-y: clip;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    outline-color: transparent;
}

    .carousel > * {
        scroll-snap-align: start;
    }

:where(.product-card) .card-video-link {
    grid-area: 1/1;
    z-index: 1;
    outline-offset: -1.5px;
}

.card-video-image:is(.card-video-image--novideo) {
    --_bg-scale: 1;
    pointer-events: none;
}

    .card-video-image:is(.card-video-image--novideo)::after {
        display: none;
    }

.product-card-scrollable::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}

.product-card {
    transition: opacity 0.75s var(--easing-snappy);
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    outline-color: transparent;
}

.product-card-image {
    grid-row: thumbnail;
}

.product-card-title {
    grid-row: title;
}

.product-card-summary {
    grid-row: summary;
}

.product-card-link {
    grid-row: link;
}

.carousel__hidden {
    opacity: 0.25;
}

.carousel__visible {
    opacity: 1;
}

.product-card-scrollable-nav {
    display: contents;
    visibility: hidden;
}


.product-card-scrollable :where(.carousel__nav--prev) {
    order: 1;
    align-self: center;
}

.product-card-scrollable :where(.carousel-container) {
    order: 2;
}

.product-card-scrollable :where(.carousel__nav--next) {
    order: 3;
    align-self: center;
}

.carousel-container:has(.carousel__hidden) + .product-card-scrollable-nav {
    visibility: visible;
}

.carousel__nav--prev,
.carousel__nav--next,
.carousel__nav--prev:hover,
.carousel__nav--next:hover {
    --button-background: transparent;
    --button-padding: 0;
    --button-border: none;
    --button-color: #000;
    transition: transform 0.25s var(--easing-snappy);
}

    .carousel__nav--prev:not([disabled]):hover,
    .carousel__nav--next:not([disabled]):hover {
        transform: scale(1.1);
    }

    .carousel__nav--prev:disabled,
    .carousel__nav--next:disabled {
        cursor: auto;
        opacity: 0.25;
    }

.carousel__nav--prev,
.carousel__nav--next {
    height: 3rem;
    width: 3rem;
}

    .carousel__nav--prev svg,
    .carousel__nav--next svg {
        pointer-events: none;
        width: 1.5rem;

        @media (width < 60em) {
            width: 1rem;
        }
    }

.carousel__nav--dots {
    display: none;
}

@container product-card-wrapper (width < 64rem) {
    .carousel-container {
        grid-column: 1/-1;
        grid-row: 1;
    }

    .product-card-scrollable-nav {
        grid-column: 1/-1;
        grid-row: 2;
        display: flex;
        justify-content: center;
        gap: var(--gap);
    }
}

@container product-card-scroller (width < 37.5rem) {
    .carousel {
        --min-width: 100%;
    }
}

@container product-card-scroller (width >= 37.5rem) and (width < 60rem) {
    .carousel {
        --min-width: calc(50cqi - (var(--gap) / 2));
    }
}

@container product-card-scroller (width >= 60rem) {
    .carousel {
        --min-width: minmax(calc((100cqi / 3) - (var(--gap) * 2 / 3)), 1fr);
    }
}

@media (width >= 69.875em) and (pointer: fine) {
    :where(.l-grid-layout__one-column) .product-card-scrollable {
        margin-inline: calc((var(--gap) + 3rem) * -1);
    }
}

@media (pointer: coarse) {
    .carousel-container {
        grid-column: 1/-1;
        grid-row: 1;
    }

    .carousel__nav {
        display: none;
    }

    .product-card-scrollable-nav {
        grid-column: 1/-1;
        grid-row: 2;
        display: flex;
        justify-content: center;
        gap: var(--gap);
    }

    .carousel__nav--dots {
        display: flex;
        gap: 0.625rem;
    }

        .carousel__nav--dots > * {
            margin: 0;
            width: 0.75rem;
            height: 0.75rem;
            border-radius: 50%;
            background-color: #ccc;
        }

        .carousel__nav--dots > .is-active {
            background-color: #333;
        }
}