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

/* Form */
form{
    gap: var(--spacing-elements-vertical);
}

.form-container{
    display: flex;
    flex-direction: row;
    gap: var(--padding-elements);
}

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

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

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

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

.form-column{
    flex: 1;
}

.form-block{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

input, textarea{
    font-family: var(--font-default);
    font-size: var(--body-text-size);
    font-weight: var(--body-text-weight);
    padding: var(--btn-padding-vertical);
    border: none;
    border-radius: var(--default-radius);
    color: var(--btn-color);
    background-color: var(--active-color);
    appearance: none;
  -webkit-appearance: none;
}

.checkbox{
    display: flex;
    flex-direction: row;
    gap: .5rem;
    align-items: center;
}

input[type="checkbox"]{
    padding: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 5px;
}

input[type="checkbox"]:checked {
  background-color: var(--accent-color);
  border-color: none;
}


textarea{
    height: calc(3.75em + 2 * var(--btn-padding-vertical));
    resize: none;
}

input:focus, textarea:focus{
    outline: var(--btn-border-width) solid var(--accent-color);
}

input[type="checkbox"]:focus{
    outline: none;
}

.btn-submit{
    outline: none;
    border: none;
    width: 100%;
}

.btn-submit:hover{
    cursor: pointer;
}

/* 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;
    }
}