main section:first-of-type{
    background-image: url(../images/thematiek/ulysses-and-sirens.jpg);
}

section:nth-of-type(2){
    display: grid;
    grid-template-columns: minmax(200px, auto) minmax(0, 500px);
    gap: 2em;
    padding-right: 12em; 
    padding-left: 12em;
    & h2{
        grid-column: span 2;
    }
    & div{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1em;
    }
}

section:nth-of-type(3){
    display: grid;
    gap: 2em;
    grid-template-columns: 1fr 1fr;
    & h2{
        grid-column: 2;
    }
    & p:first-of-type{
        grid-column: 2;
    }
    & div{
        grid-row: 1 / span 2;
        align-self: center;
    }
}

section:nth-of-type(4){
    display: grid;
    gap: 2em;
    padding: 0 0 0 8em;
    grid-template-columns: auto 450px;
    grid-template-rows: 1fr 1fr 3em;
    & h2{
        align-self: end;
    }
    & img{
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
        justify-self: end;
    }
    & p{
        max-width: 800px;
    }
    & .bijschrift{
        place-self: end;
    }
}

section:nth-of-type(5){
    display: grid;
    justify-items: center;
    & >p{
        margin: 2em 0;
        max-width: 800px;
        text-align: center;
    }
    & article{
        display: grid;
        grid-template-columns: auto 300px;
        grid-template-rows: 1fr 1fr 3em;
        gap: 1em;
        padding: 2em 0;
        border-top: dotted var(--secondary-color) 3px;
        & h3{
            align-self: end;
        }
        & img{
            grid-column: 2;
            grid-row: 1 / span 3;
            aspect-ratio: 1;
            object-fit: cover;
            width: 300px;
            justify-self: end;
            align-self: center;
        }
        & p{
            max-width: 800px;
        }
        & .bijschrift{
            place-self: end;
        }
    }
    & article:last-of-type{
        padding-bottom: 0;
    }
}