/* Opmaak van de main */
main section:nth-of-type(1) {
    background-color: #F1f4f2;
    display: flex;
    flex-direction: column;
    padding: 2.25em;
}

main section:nth-of-type(1) h2 {
    padding-bottom: 0.85em;
}

.zoekbalk {
    display: flex;
    flex-wrap: nowrap;
}

main section:nth-of-type(1) input {
    padding: 1em;
    border-top: 2px solid #d7d7d7;
    border-left: 2px solid #d7d7d7;
    border-right: none;
    border-bottom: 2px solid #d7d7d7;
    border-radius: 0;
    font-family: var(--lettertype-2);
    color: #373737;
    height: 3.5em;
    width: 100%;
    padding-right: 0;
}

main section:nth-of-type(1) button {
    padding: 1em;
    height: 3.5em;
    width: 3.5em;
    border: none;
    background-color: #1f7d65;
}

main section:nth-of-type(1) button svg {
    fill: white;
}

main section:nth-of-type(1) ul {
    list-style: none;
    padding: 0;
    font-family: var(--lettertype-3);
    font-weight: 700;
}

main section:nth-of-type(1) ul li {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    background-image: url("../images/functional-images/chevron-right-asn.svg");
    background-repeat: no-repeat;
    background-position: 0 center;
    fill: #761234;
    background-size: 0.80rem 0.80rem;
}

main section:nth-of-type(1) ul li a {
    text-decoration: none;
    color: var(--achtergrondkleur-4);
}


/* Bron: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Child_combinator */
main>article:nth-of-type(1) {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    padding: 2.25em;
}

main>article:nth-of-type(1) img {
    height: auto;
    width: 20em;
    padding: 1.5em;
    align-self: center;
}

main>article:nth-of-type(1) a {
    text-decoration: none;
    color: #761234;
    font-family: var(--lettertype-3);
}

main>article:nth-of-type(1) a img {
    height: auto;
    width: 1.25em;
    padding: 0;
    padding-left: 0.3em;
}

main section:nth-of-type(2) {
    background-color: #fdf3e5;
}

main section:nth-of-type(2) ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 1.25em;
    padding: 1.75em;
}

main section:nth-of-type(2) ul li {
    background-color: white;

    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.25em;

    text-align: center;
    font-size: 14px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 15px -5px rgba(0, 0, 0, 0.05), 0 5px 5px -5px rgba(0, 0, 0, 0.04);
}

/* Bron: https://www.w3schools.com/css/css3_flexbox_responsive.asp */
/* Bron: https://gemini.google.com/share/7c7aef35fe91 */
/* Tablet 2 blokjes per rij */
@media (min-width: 600px) {
    main section:nth-of-type(2) ul li {
        flex: 1 1 calc(50% - 1.25em);
        max-width: calc(50% - 1.25em);
    }
}

/* Desktop 3 blokjes per rij */
@media (min-width: 900px) {
    main section:nth-of-type(2) ul li {
        flex: 1 1 calc(33.333% - 1.25em);
        max-width: calc(33.333% - 1.25em);
    }
}

main section:nth-of-type(2) ul li a {
    color: #761234;
    font-family: var(--lettertype-3);
    font-size: 16px;
}

main section:nth-of-type(2) ul li a img {
    width: 1em;
    height: auto;
}

main article:nth-of-type(2) {
    padding: 2.25em;
    padding-bottom: 4em;
    display: flex;
    flex-direction: column;
}

main article:nth-of-type(2) img {
    width: 25em;
    height: auto;
    align-self: center;
}

main article:nth-of-type(2) a {
    color: var(--achtergrondkleur-4);
    font-family: var(--lettertype-3);
}

main article:nth-of-type(2) a img {
    height: auto;
    width: 1.2em;
    padding-left: 0.25em;
}