*,
*::before,
*::after {
    box-sizing: border-box;
}

/* TYPOGRAFIE */
body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
}

main {
    max-width: 80ch;
}

h1 {
    font-size: 2.25rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.125rem;
}

h1,
h2,
h3 {
    margin-block-start: 2rem;
    margin-block-end: 0.5rem;
}

h2+h3 {
    margin-block-start: 1rem;
}

p {
    margin-block-start: 0;
    margin-block-end: 1rem;
}

.meta {
    font-style: italic;
    color: #666;
}

.introduction {
    font-weight: 500;
    color: #111;
}

/* CLASSES */
.page {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

.content {
    padding: 1rem;
}

/* CARDS */
@media (min-width: 40rem) {

    .teasers {

        display: flex;
        gap: 1rem;
        margin: 0;
        padding: 0;
        flex-wrap: wrap;

        li {
            display: flex;
            flex-direction: column;

            position: relative;

            display: flex;
            flex-direction: column;

            flex: 1 1 25%;
            max-width: 33%;
            min-width: 18rem;

            background-color: #fff;
            border-radius: 0.5rem;
            overflow: hidden;

            box-shadow:
                0 0.25rem 0.5rem rgba(0, 0, 0, .08),
                0 1rem 2rem rgba(0, 0, 0, .08);
        }

        img {
            display: inline flex;
            width: 100%;
            height: auto;
            order: -1;
        }

        h3 {
            margin: 0 0 0.5rem;
            font-size: 1rem;
        }

        p {
            margin: 0 0 0.75rem;
            font-size: 0.875rem;
            color: #555;
        }

        .overlay-link {
            position: absolute;
            inset: 0;
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
        }

    }

}

.teasers .content a:not(.overlay-link) {
    margin-top: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.teasers .content a:hover {
    text-decoration: underline;
}

/* LINK */
.mylink a {
    color: #b91c1c;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    padding: 1.5rem;
}

.mylink a::before {
    content: "❌";
    /* symbooltje gevraagd aan GPT */
    position: relative;
    left: 0;
}

/* BUTTON */
.mybutton a {
    display: inline-block;
    padding: 0.75rem 1.25rem;

    background-color: #058b20;
    color: #fff;
    text-decoration: none;
    font-weight: 600;

    border-radius: 0.375rem;
}