/* 
--------01 TYPOGRAPHY SYSTEM 

- FONT SIZE SYSTEM {px}
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 /98

---- 07 WHITESPACE
- SPACING SYSTEM {px}
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 
*/

/*************************************/
/*      BELOW 1100 (SMALL LAPTOP)    */
/*************************************/

@media(max-width: 69em) {
    html{
        font-size: 56.25%;
    }
    p{
        font-size: 1.4rem;
    }   
}


/*************************************/
/*      BELOW 1000 (LARGE TABLET)    */
/*************************************/

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

    .heading-secondary{
        font-size: 3rem;
    } 

    .paragraph{
        font-size: 1.4rem;
    }
    
    .follower{
        font-size: 6.2rem;
    }

    .section-hero{
        margin: 3.2rem 6.4rem;
    }
}


/*************************************/
/*      BELOW 780 (TABLET)    */
/*************************************/

@media(max-width: 48.75em) {
    html{
        font-size: 50%;
    }

    .container{
        padding: 3rem 5.2rem;
    }

    .heading-primary{
        font-size: 3rem;
    }

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

    .paragraph{
        font-size: 1.2rem;
    }

    p{
        font-size: 1.2rem;
    }
}


@media(max-width: 24em){
    .grid--2--cols{
        grid-template-columns: 1fr;
        gap: 6.4rem;
    }

    .hero-followers{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6.4rem;
    }

    .grow-img{
        grid-row: 1;
    }

    .user-img{
        grid-row: 1;
    }

    .container{
        padding: 2rem 3.2rem;
    }

    .section-hero{
        margin: 2rem 3.2rem;
    }

    .follower{
        font-size: 5.2rem;
    }
}