body {
    color: var(--page-accent);
}

main {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 0.5em;
}

main a {
    color: var(--blue);
}

main a:hover {
    color: black;
}

section.introduction {
    grid-column: 1 / span 16;
    grid-row: 1;
    margin-bottom: 1em;
}

section.schools,
section.teaching,
section.prices {
    grid-row: 2;
}

section.schools {
    grid-column: 1 / span 6;
    column-gap: .5em;
    column-count: 2;
}

section.prices {
    grid-column: 7/ span 3;

}

section.teaching {
    grid-column: 14 / span 3;

}

section.events {
    grid-column: 1/-1;
    grid-row: 3;

}

section.schools li {
    break-inside: avoid;
}

section.schools h2 {
    break-after: avoid;
}

ul li:last-child {
    margin-bottom: 1em;
}

section.teaching ul li:not(:first-child),
section.prices ul li:not(:first-child),
section.schools ul li:not(:first-child),
section.events ul li:not(:first-child) {
    text-indent: 1em;


}

section.events {
    margin-top: 1em;
}

h2 {
    text-transform: uppercase;
    margin-bottom: 1em;
}


@media (width < 960px) {

    nav.mobile {
        display: block !important;
        position: relative !important;
        bottom: 0 !important;

        a:nth-of-type(1) {
            display: none;
        }

    }

    nav:not(.mobile) {
        position: relative !important;


        a:nth-of-type(1n+2) {
            display: none;
        }
    }

    section.schools {
        grid-column: 1 / -1;
        column-gap: .5em;
        column-count: 2;
        grid-row: 2;
    }

    section.prices {
        grid-column: 1 / span 8;
        grid-row: 3;
    }

    section.teaching {
        grid-column: 1 / span 8;
        grid-row: 4;
    }

    section.events {
        grid-column: 1 / -1;
        grid-row: 5;
    }

}