﻿.parent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3,auto);
    grid-column-gap: 20px;
    grid-row-gap: 30px;
}

h2 {
    display: block;
    text-align: center;
    background: rgb(242, 242, 242);
    color: rgb(0, 45, 71);   
}

h4 {
    margin:10px 0 20px 0;
}

.div1 {
    grid-area: 1 / 1 / 2 / 3;
    box-shadow: 0 2px 4px rgba(0, 45, 71, 0.5);
    border-radius: var(--radius);
    background: rgb(0, 45, 71);
}

    .div1 img,
    .div2 img,
    .div3 img,
    .div4 img,
    .div5 img {
        width: 100%; /* Zorg ervoor dat de afbeelding zich aanpast aan de breedte van het blok */
        height: auto; /* Zorg ervoor dat de hoogte van de afbeelding proportioneel schaalt */
        border-radius: var(--radius);
    }

.div2 {
    grid-area: 1 / 3 / 2 / 5;
    box-shadow: 0 2px 4px rgba(0, 45, 71, 0.5);
    border-radius: var(--radius);
}

.div3 {
    grid-area: 1 / 5 / 2 / 7;
    box-shadow: 0 2px 4px rgba(0, 45, 71, 0.5);
    border-radius: var(--radius);
}

.div4 {
    grid-area: 2 / 1 / 3 / 3;
    box-shadow: 0 2px 4px rgba(0, 45, 71, 0.5);
    border-radius: var(--radius);
    background:white;
}

.div5 {
    grid-area: 2 / 5 / 3 / 7;
    box-shadow: 0 2px 4px rgba(0, 45, 71, 0.5);
    border-radius: var(--radius);
}

.div6 {
    grid-area: 3 / 1 / 4 / 7;  
}

.card {
    inline-size: 49%;
}

/* ========== Instelling voor schermen tot 768 pixels (mobiele telefoons etc)  ========== */

@media screen and (max-width: 769px) {
    .card {
        inline-size: 100%; /* één kaart op een regel */
    }

    .parent {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7, auto);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .div1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    .div2 {
        grid-area: 2 / 1 / 3 / 2;
    }

    .div3 {
        grid-area: 3 / 1 / 4 / 2;
    }

    .div4 {
        grid-area: 4 / 1 / 5 / 2;
    }

    .div5 {
        grid-area: 5 / 1 / 6 / 2;
    }

    .div6 {
        grid-area: 6 / 1 / 7 / 2;
    }

}