.producten_overzicht_list {
    --producten-overzicht-image-height: calc((100cqw - 9rem) / 4);
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3rem;
    row-gap: var(--jumbotron-margin-md);
}

.producten_overzicht_list_columns_1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.producten_overzicht_list_columns_2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.producten_overzicht_list_columns_3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.producten_overzicht_item {
    display: flex;
    height: 100%;
}

.producten_overzicht_card {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    height: 100%;
    color: var(--donker-grijs);
    text-align: center;
    text-decoration: none;
    transition: color 0.2s ease;
}

.producten_overzicht_card:hover,
.producten_overzicht_card:focus {
    color: var(--donker-grijs);
    text-decoration: none;
}

.producten_overzicht_image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: var(--producten-overzicht-image-height);
    overflow: hidden;
    background-color: var(--grijs-10);
}

.producten_overzicht_image picture {
    display: flex;
    width: 100%;
    height: 100%;
}

.producten_overzicht_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: darken;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.producten_overzicht_card:hover .producten_overzicht_image img,
.producten_overzicht_card:focus .producten_overzicht_image img {
    opacity: 0.88;
    transform: scale(1.04);
}

.producten_overzicht_content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.jumbotron .producten_overzicht_title {
    margin: auto 0 0;
    margin-bottom: auto !important;
    color: var(--groen);
    line-height: 1.1;
    letter-spacing: 0;
    transition: color 0.2s ease;
}

.jumbotron .producten_overzicht_card:hover .producten_overzicht_title,
.jumbotron .producten_overzicht_card:focus .producten_overzicht_title {
    color: var(--donker-grijs);
}

.producten_overzicht_sku {
    margin: var(--default-margin-bottom) 0 2rem;
    color: var(--donker-grijs);
    font-family: var(--body-font);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.3;
}

.producten_overzicht_description {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--donker-grijs);
    font-family: var(--body-font);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media (max-width:767px) {
    .producten_overzicht_list {
        --producten-overzicht-image-height: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }

    .producten_overzicht_list_columns_1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .producten_overzicht_image {
        aspect-ratio: 1 / 1;
    }

    .producten_overzicht_card {
        gap: 2rem;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .producten_overzicht_list {
        --producten-overzicht-image-height: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .producten_overzicht_list_columns_1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .producten_overzicht_image {
        aspect-ratio: 1 / 1;
    }
}
