@media screen and (max-device-width: 125rem) and (max-width: 68rem) {

    body {
        overflow-x: hidden;
    }

    #slide1 {
        height: calc(100vh - 60px);
    }

    section {
        padding         : 3rem 1.5rem 4rem 1.5rem !important;
        margin          : unset;
        border-radius   : unset;
        background-color: unset;
        line-height     : 2rem;
    }

    #hero {
        margin-top: 10px;
    }

    #portfolio div.hero {
        font-size     : 62pt;
        letter-spacing: -0.35rem;
        line-height   : 50pt;
    }

    #portfolio div.tagline {
        font-size: 2rem;
        width    : 290px;
        margin   : auto;
    }

    #button-group {
        bottom: 90px;
    }

    div#divider {
        height: 80px;
    }

    .img-hover-zoom {
        height: 180px
    }

    .coverLarge {
        height: 190px;
    }

    #portfolio #casestudy h1,
    #portfolio section h1 {
        font-size  : 3rem !important;
        line-height: 2.7rem !important;
        padding-left : 20px;
    }

    #portfolio h2 {
        padding-left : 20px;
    }

    #portfolio p {
        line-height  : var(--cozy-height);
        padding-left : 20px;
        padding-right: 20px;
    }

    section {
        padding: var(--s2) var(--s2);
    }

    #portfolio blockquote,
    #portfolio section blockquote {
        line-height: var(--default-height);
        padding-left : 20px;
        padding-right: 20px;
    }

    #portfolio .card {
        padding: var(--s3) var(--s2);
    }

    #portfolio .flex-middle {
        flex-direction: column;
        align-items   : unset;
    }

    /* Used in About page header */
    .parent {
        flex-direction: column;
    }

    #about-portrait-align {
        margin-top: 40px;
    }

}