h2 {
    color: red;
}

/* Intro: 2 kolommen */
.intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 40px;
    width: 90%;
    margin: 0 auto 60px auto;
}

/* Tekst linksboven */
.intro-text {
    grid-column: 1;
    grid-row: 1;
}

.intro-text h2,
.intro-text p {
    line-height: 1.2;
}

/* Grote afbeelding rechts */
.intro-image {
    grid-column: 2;
    grid-row: 1 / span 3;
}

.intro-image img {
    margin-top: 40px;
    width: 100%;
    height: auto;
    display: block;
}

/* Kleine afbeeldingen links */
.klein {
    grid-column: 1;
}

.klein:nth-of-type(1) {
    grid-row: 2;
}

.klein:nth-of-type(2) {
    grid-row: 3;
}

.klein img {
    width: 50%;
    height: auto;
    display: block;
}

/* --- Responsive layout onder 800px --- */
@media (max-width: 800px) {

    .intro {
        grid-template-columns: 1fr; /* één kolom */
        gap: 20px;
    }

    /* Tekst bovenaan */
    .intro-text {
        grid-column: 1;
        grid-row: 1;
    }

    /* Grote afbeelding onder de tekst */
    .intro-image {
        grid-column: 1;
        grid-row: 2;
    }

    .intro-image img {
        margin-top: 10px;
        width: 100%;
    }

    /* Kleine afbeeldingen daaronder */
    .klein {
        grid-column: 1;
        width: 100%;
    }

    .klein:nth-of-type(1) {
        grid-row: 3;
    }

    .klein:nth-of-type(2) {
        grid-row: 4;
    }

    .klein img {
        width: 50%; /* geen 50% meer */
    }
}