/*
    Block - Steps (blockSteps)
    Genummerde stappen in dezelfde gecentreerde col-lg-8 als de tekstblocks.
    Vanaf 1200px alle stappen naast elkaar, daaronder twee, mobiel onder elkaar.
    Het nummer zet de view neer op basis van de volgorde van de items.
*/

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

    .steps__title {
        margin-bottom: 1rem;
    }

    .steps__items {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 3rem;
        margin: 3rem 0 0;
        padding: 0;
        list-style: none;
    }

.step__number {
    display: block;
    margin-bottom: .8rem;
    font-family: Changa;
    font-weight: 800;
    font-size: 4rem;
    line-height: 1;
    color: var(--blue);
}

.step__title {
    margin-bottom: .8rem;
    font-size: 1.6rem;
    line-height: 2rem;
}

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

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

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