/*
    Block - Features (blockFeatures)
    Titel, intro en tegels met elk een eigen titel en tekst, in dezelfde gecentreerde col-lg-8 als de tekstblocks.
    Vanaf 1200px drie tegels naast elkaar, daaronder twee, mobiel onder elkaar.
*/

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

    .features__title {
        margin-bottom: 1rem;
    }

    .features__items {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3rem;
        margin-top: 3rem;
    }

.feature {
    padding: 3rem;
    background-color: var(--blue-light);
}

    /* Lange woorden als 'Productontwikkeling' afbreken in plaats van buiten de tegel te laten lopen */
    .feature__title {
        margin-bottom: 1rem;
        font-family: Changa;
        font-weight: 800;
        font-size: 2.2rem;
        line-height: 2.3rem;
        hyphens: auto;
        overflow-wrap: break-word;
    }

    .feature__text p:last-child {
        margin-bottom: 0;
    }

/* Tussen 1200 en 1500px zijn drie tegels in de col-lg-8 smal: iets minder binnenruimte en een kleinere titel,
   zodat woorden als 'Productontwikkeling' in hun geheel passen */
@media (min-width: 1200px) and (max-width: 1499px) {
    .feature {
        padding: 2rem;
    }

        .feature__title {
            font-size: 1.8rem;
            line-height: 2rem;
        }
}

@media (max-width: 1199px) {
    .features__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .features__items {
        grid-template-columns: minmax(0, 1fr);
    }
}