.hero-content h1{
    max-width: 70%;
}

.content-cta div{
    background-color: var(--card-color);
    border: var(--btn-border-width) solid var(--border-color);
    border-radius: var(--default-radius);
    align-items: center;
    text-align: center;
    padding: var(--padding-elements);

    display: flex;
    flex-direction: column;
    gap: var(--spacing-elements-vertical);
}

.content-cta .btn{
    width: fit-content;
}

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

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


/* Mobile */
@media (max-width: 768px) {

    /* Hero */
    .hero-content,
    .hero-content h1,
    .hero-content p,
    .hero-content .btn-box {
        width: 100%;
        max-width: 100%;
    }

    .hero-content .btn-box {
        flex-direction: column;
    }

    .hero-content .btn {
        width: 100%;
    }
}


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