﻿.product-card-list {
    --min-width: 20rem;
    --gap: 4rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-width), 100%), 1fr));
    grid-template-rows: [thumbnail] auto [title] auto [summary] 1fr [link] auto;
    gap: var(--gap);
}

:where(.product-card) .card-video-link {
    grid-area: 1/1;
    z-index: 1;
    outline-offset: -1.5px;
}

@media (width >= 37.5rem) {
    .product-card-list:has(> :nth-child(4):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


.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 {
    transition: opacity 0.75s var(--easing-snappy);
    grid-row: span 4;
    display: grid;
    gap: 1.25rem;
    grid-template-rows: subgrid;
    outline-color: transparent;
}

.product-card-image {
    grid-row: 1;
}

    .product-card-image:is(.card-video) {
        gap: 0;
    }

.product-card-title {
    font-size: clamp(1.5rem, 1.3885rem + 0.4054vw, 1.875rem);
    line-height: 1.1333;
    grid-row: 2;
}

.product-card-summary {
    grid-row: 3;
}

.product-card-link {
    grid-row: 4;
}
