h1, h2 {
    text-align: center;
    margin-block: 2rem;
}

img + p {
    margin-top: 1.5rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

section {
    padding: 1rem;
    width: 100%;

}

section ul {
    padding-left: 1.5rem;
    margin: 0;
}

section li {
    margin-bottom: 0.5rem;
}


img {
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 8px;
    margin-bottom: 2rem;
}


.lijn {
    height: 3px;
    width: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--link), var(--link-hover));
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

@media (min-width: 48em) {
    h1, h2 {
        text-align: left;
    }

    .intro {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 2rem;
        align-items: start;
    }

    .intro h1 {
        grid-column: 1 / -1;
    }

    .intro img {
        margin-bottom: 0;
    }

    .intro p {
    }
}