/*
    Block - Product selection (blockProductSelection)
    Handmatig gekozen producten als de bestaande producttegels (ProductItem), met een optionele knop eronder,
    in dezelfde gecentreerde col-lg-8 als de tekstblocks. De tegels vullen samen de breedte.
*/

/* De marges van blocks op de landingpage tellen bij elkaar op: 4,5rem boven en onder geeft 9rem tussen twee blocks */
.productselection {
    margin: 4.5rem 0;
}

    .productselection__title {
        margin-bottom: 3rem;
    }

    .productselection__products {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
        gap: 3rem;
    }

        .productselection__products .productoverview__item {
            height: 100%;
        }

    .productselection__button {
        display: flex;
        justify-content: center;
        margin-top: 4rem;
    }

@media (max-width: 767px) {
    /* Op mobiel zijn de tegels rijen met een eigen scheidingslijn en marge, dus geen extra gap */
    .productselection__products {
        gap: 0;
    }
}