@media (max-width: $responsive-small) {
    main {
        margin: 0;
    }

    header#banner {
        grid-template-columns: min-content auto;
        grid-template-rows: min-content auto;
        grid-template-areas:
            "logo actions"
            "nav nav";

        // Use vertical navbar under header
        section.navbar {
            margin-left: 0;
            display: none;
            &.visible {
                display: block;
            }

            ul li a {
                display: block;
            }
        }

        section.actions .navbar-toggle {
            display: block !important;
        }
    }

    header#headertron {
        font-size: 1.6em;

        .nav {
            display: block;
        }

        .links {
            justify-content: space-evenly;

            a {
                margin: 0;
            }
        }
    }
}

@media (max-width: $responsive-mini) {
    content,
    body > footer {
        padding-left: 1em;
        padding-right: 1em;

        ul {
            display: block;
            margin-left: 0;
        }
    }

    body > footer ul {
        display: block;
        margin-left: 0;
    }

    header#banner,
    header#headertron {
        padding: 0 1em 0 1em;
    }

    header#headertron {
        font-size: 1.2em;
    }
}

@media (max-width: $responsive-tiny) {
    header#headertron .links {
        flex-direction: column;
    }
}

@media (min-width: $responsive-big) {
    header#headertron {
        font-size: 3em;
    }
}