/*
 * Style for magnum timetable page.
 */

section#headerTitle {
    padding-top: 10em;
    margin-left: var(--gutter);
    margin-right: var(--gutter);
}

section#timetable {
    padding-top: 4em;
}

section#timetable h1 {
    margin-left: var(--gutter);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}

div.fourBlock .block {
    width: 21%;
    padding: 0;
    margin-bottom: 2%;
    position: relative;
    background-color: var(--white);
    border-radius: 0;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .25s ease-in-out;
}

div.fourBlock .block:hover {
    transform: translateY(-8px);
}

div.fourBlock .block h2 {
    padding: 5% 0;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
}

div.fourBlock .block ul {
    padding: 5% 15%;
    height: 10em;
}

div.fourBlock .block ul li {
    list-style-type: disc;
    margin-bottom: .5em;
}

div.fourBlock .block p {
    position: absolute;
    bottom: .5em;
    left: 1em;
    font-size: .7em;
    font-style: italic;
    text-align: center;
}

/* Screen size adjustments */
@media screen and (max-width: 780px) {

    section#headerTitle {
        max-width: 80%;
    }

    div.fourBlock > .block, div.fourBlock > .block.first {
        width: 28%;
        padding: 0;
        float: left;
        margin-right: 2%;
        margin-bottom: 0;
    }
}

/* Screen size adjustments */
@media screen and (max-width: 500px) {

    div.fourBlock > .block, div.fourBlock > .block.first {
        width: 44%;
    }
}