body {
    overflow-x: hidden;
}

main {

    margin-top: 1em;
}

.courses {
    grid-column: 3 / span 10;
}

h3 {
    text-decoration: none;
}

li.course {
    margin: 0 0 1em 5ch;
    list-style-type: decimal;
}

ul.courses {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(12, 1fr);
}

ul.courses h2 {
    grid-column: 1/10;
    border-bottom: 1px solid black;
}

ul.courses h3 {
    grid-column: 2/10;
    border-bottom: 1px solid black;
}

ul.courses li {
    grid-column: 3/10;
}

li.course a {}

.courses-by-year {
    grid-column: 3 / span 10;
}

section.map {
    position: fixed;
    bottom: var(--body-margin);
    text-align: center;
    width: 100%;
    padding: 1em;

}

.courses {
    position: relative;
}

.hover-img {
    opacity: 0;
    width: 20vw;
    position: absolute;
    pointer-events: none;
    z-index: 10;
    right: 5vw;
    top: 10%;

}

.hover-img figcaption {
    display: none;
}



a.title:hover+.hover-img {
    opacity: 1;
}

section.map a {
    background-color: white;
    outline: 1px solid var(--link-color);
    padding: .2em .4em;
}

@media only screen and (995px < width <=1500px) {

    .courses {
        grid-column: 2 / -1;
    }

    ul.courses h2 {
        grid-column: 1/12;
        border-bottom: 1px solid black;
    }

    ul.courses h3 {
        grid-column: 2/12;
        border-bottom: 1px solid black;
    }

    ul.courses li {
        grid-column: 3/11;
    }
}

@media only screen and (width <=995px) {
    figure {
        display: none;
    }

    .courses {
        grid-column: 1 / -1;
    }

    .courses-by-year {
        grid-column: 1 / -1;
    }

    ul.courses h2 {
        grid-column: 1/-1;
        border-bottom: 0px solid black;
        outline: 1px solid var(--link-color);
        background: white;
        padding: .4em;

        text-decoration: none;
        text-decoration: none;
    }

    ul.courses h3 {
        grid-column: 2/-1;
        border-bottom: 1px solid black;
        text-decoration: none;
    }

    ul.courses li {
        grid-column: 3/-1;
    }

    li.course {
        margin: 0 0 1em 3ch;
        list-style-type: decimal;
    }

    section.map {
        display: none;
    }
}