/*@import url("../global.css");
@import url("../elements/cards.css");*/

.container:nth-child(odd) .content .cards-container .card{
    background-color: var(--secondary-color);
}

.content-steps .cards-container{
    grid-template-columns: repeat(4, 1fr);
}


/* Aanpak: 2 columns when 4 cards no longer fit nicely */
@media (max-width: 1100px) {
    .content-steps .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-container{
        flex-direction: column;
        gap: var(--spacing-elements-vertical);
    }
}

/* Aanpak: 1 column on mobile */
@media (max-width: 600px) {
    .content-steps .cards-container {
        grid-template-columns: 1fr;
    }

    form.form-column{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: fit-content fit-content fit-content fit-content fit-content;
    }

    .column-span-2{
        grid-column: span 1;
    }
}