/* ******************************* */
/* BELOW 1344px(84em x 16) Smaller desktops */
/* ******************************* */

@media(max-width: 84em) {
    
    .heading-primary {
        font-size: 4.4rem;
    }

    .header-container {
        width: 75%;
    }
}

/* ******************************* */
/* BELOW 1200px(75em x 16) Landscape Tablets */
/* ******************************* */

@media(max-width: 75em) {
    html {
        /* 9px / 16px -> 56.25% */
        font-size: 56.25%;
    }

    .grid {
        gap: 6.4rem;
    }
    
    .heading-secondary {
        font-size: 3.6rem;
    }

    .heading-tertiary {
        font-size: 2.4rem;
    }

    .main-nav {
        padding: 0 3.2rem;
    }

    .main-nav-list {
        gap: 3.2rem;
    }

}

/* ******************************* */
/* BELOW 944px(59em x 16) Tablets */
/* ******************************* */
@media (max-width: 59em) {
    html {
        font-size: 53%;
    }

    .grid--special-classes {
        grid-template-columns: repeat(2, 1fr);
        gap: 3.2rem;
    }

    .special-class {
        width: 90%;
    }

    .special-class:nth-child(odd){
        justify-self: end;
    }

    .class-number,
    .class-title {
        text-align: center;
    }

    .class-pricing {
        justify-content: center;
    }

    .class-img.img-sizechange-2 {
        width: 48%;
    }

    /* MOBILE NAVIGATION */
    .btn-mobile-nav {
        display: block;
    }

    .main-nav-list {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4.8rem;

        background-color: rgba(255, 255, 255, 0.97);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        transform: translateX(100%);

        transition: all .5s ease-in;
        
        /* Hide list */
        
        /* 1) Hide it visually */
        opacity: 0;

        /* 2) Make it unaccessible to mouse and keyboard */
        pointer-events: none;

        /* 3) Hide it from screen readers */
        visibility: hidden;
    }

    .navlist-open .main-nav-list {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);
    }

    .navlist-open .icon-mobile-nav[name="close-outline"] {
        display: block;
    }

    .navlist-open .icon-mobile-nav[name="menu-outline"] {
        display: none;
    }

    .main-nav-list,
    .btn-mobile-nav {
        z-index: 1000;
    }

    .main-nav-link:link,
    .main-nav-link:visited {
        font-size: 3rem;
    }


}

/* ******************************* */
/* BELOW 704px(44em x 16) Smaller Tablets */
/* ******************************* */
@media(max-width: 44em) {
    .header {
        background-image: url(../img/hero-background-sm.jpg);
        background-position: top center;
    }

    

    .grid--special-classes {
        column-gap: 2.4rem;
        row-gap: 3.2rem;
    }

    .special-class {
        width: 100%;
    }

    .heading-secondary {
        margin-bottom: 4.8rem;
    }    
}
    
/* ******************************* */
/* BELOW 544px(34em x 16) Phones */
/* ******************************* */
@media(max-width: 34em) {
   html {
       font-size: 55%;
   }

   .header {
       height: 83vh;

   }

   .header-container {
       width: 90%;
       top: 42%; 
   }

   .heading-primary {
       word-break: keep-all;
   }

   .heading-primary-img {
        width: 100%;
   }

   .fancy-text {
    font-size: 2.4rem;
   }

   .workshop-text {
       line-height: 1.6;
       word-break: keep-all;
   }
   
   .grid--special-classes {
        grid-template-columns: 1fr;
    }

    .btn,
    .btn:link,
    .btn:visited {
        padding: 2.4rem 1.6rem;
    }
}


/* ******************************* */
/* BELOW 368px(23em x 16) Smaller phones */
/* ******************************* */
@media(max-width: 23em) {

    html {
        font-size: 45%;
    }

    .header {
        height: 105vh;
    }

    .header-container {
        width: 90%;
        margin-top: 0;
    }

    .btn,
    .btn:link,
    .btn:visited {
        padding: 2.4rem 1.2rem;
    }
    
}

/* FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 */