:root{
    /* --card-container-grid-columns: ; inherited */
    --card-max-width: min(20rem, 85vw);
    --card-border-radius: 8px;

    --card-container-minmax-max-value: 1fr;
    --card-container-gap-x: var(--gap-xs); /*clamp(var(--gap-s), 1.5vw, var(--gap-l)); /* a fluid gap, vs. var(--gap-xl) var(--gap-l);*/
    --card-container-gap-y: clamp(var(--gap-l), 4vw, var(--gap-xl)); /* a fluid gap, vs. var(--gap-xl) var(--gap-l);*/

    --thumbnail-container-aspect-ratio: 7/4; /* 280px x 160px */
    --thumbnail-container-max-width: 17rem;

    --logo-container-aspect-ratio: 3/2;
    --logo-container-width: 15%;

    --keySpecs-container-gap: var(--gap-m) var(--gap-xs);
}

.cardContainer{
    gap: var(--card-container-gap-y) var(--card-container-gap-x);
    grid-template-columns: repeat( auto-fit, minmax(var(--card-max-width), var(--card-container-minmax-max-value)));
}

.card{
    border-radius: var(--card-border-radius);
    cursor:pointer;
    max-width:var(--card-max-width);
}

.thumbnailContainer{
    aspect-ratio: var(--thumbnail-container-aspect-ratio);
    width: var(--thumbnail-container-max-width);
}

.logoContainer{
    aspect-ratio: var(--logo-container-aspect-ratio);
    width: var(--logo-container-width);
}

.titleContainer{
    height:1.75rem; /*28 px*/
}

.keySpecsContainer{
    grid-template-columns: repeat( 2, 1fr);
    gap: var(--keySpecs-container-gap);
}