/* ==========================================================
   TABLETS
========================================================== */

@media(max-width:1024px){

    .grid-4{

        grid-template-columns:
        repeat(2,1fr);
    }

    #lessonDrawer{

        width:100%;
    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

    h1{

        font-size:2.5rem;
    }

    h2{

        font-size:2rem;
    }

    .grid-3,
    .grid-4,
    .grid-2{

        grid-template-columns:1fr;
    }

    section{

        padding:60px 18px;
    }

    #sidebar{

        width:280px;
    }

}

/* ==========================================================
   SMALL PHONES
========================================================== */

@media(max-width:480px){

    .btn{

        width:100%;
    }

    .hero{

        min-height:70vh;
    }

}