#instructions {
    text-align: center;
    background: linear-gradient(to bottom, rgba(70, 120, 180, 0.3) 1%, rgb(242, 242, 242, 0.4) 35%);
    padding-bottom: 2rem;
}

#instructions h1 {
    padding-top: 2rem;
    font-weight: 900;
    margin: 0 2rem;
    padding: 1rem 3rem 2rem
}

#instructions p {
    padding: 0 3rem 1rem;
}

#mobileHeroImage {
    width: 100%;
    margin-bottom: 2rem;
}

#desktopHeroImage {
    display: none;
}

#heroStackedCotent p {
    display: none;
}

@media (min-width: 540px) {
    #mobileHeroImage {
        display: none;
    }

    #desktopHeroImage {
        display: inline-block;
        width: 50vw;
    }

    #heroStackedCotent {
        background: linear-gradient(to right, rgba(70, 120, 180, 0.3) 20%, rgb(242, 242, 242, 0.4) 80%);
    }

    #instructions {
        background: none;
    }

    #heroTitle {
        display: flex;
        align-items: center;
    }

    #heroStackedCotent p {
        display: block;
    }

    #mobileHeroDescription {
        display: none;
    }
}

@media (min-width: 700px) {
    #instructions {
        font-size: 1.3rem;
    }
}