/*
    Block - Banner (blockBanner)
    Gekleurd vlak met titel, tekst en een optionele knop.
    Zwart (standaard) en blauw krijgen witte tekst, lichtgrijs krijgt zwarte tekst.
*/

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

    .banner__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 2rem 4rem;
        padding: clamp(3rem, 5vw, 6rem);
        background-color: var(--black);
        color: var(--white);
    }

    .banner__content {
        max-width: 64rem;
    }

    .banner__title {
        margin-bottom: .8rem;
        font-size: clamp(2.6rem, 3.5vw, 4rem);
        line-height: 1.2;
    }

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

    /* Links in de tekst altijd onderstreept, in de tekstkleur van het vlak */
    .banner__text a {
        font-weight: 600;
        color: var(--white);
        background-image: linear-gradient(var(--white), var(--white));
        background-size: 100% .1rem;
    }

    .banner__button {
        white-space: nowrap;
    }

.banner--blue .banner__inner {
    background-color: var(--blue);
}

.banner--lightgrey .banner__inner {
    background-color: var(--blue-light);
    color: var(--black);
}

    .banner--lightgrey .banner__text a {
        color: var(--black);
        background-image: linear-gradient(var(--black), var(--black));
    }

@media (hover: hover) and (pointer: fine) {
    .banner__text a:hover {
        color: var(--grey-light);
        background-image: linear-gradient(var(--grey-light), var(--grey-light));
    }

    .banner--lightgrey .banner__text a:hover {
        color: var(--blue);
        background-image: linear-gradient(var(--blue), var(--blue));
    }
}