/* LG - LARGE SCREEN LAPTOPS - 1280PX - 1400PX */
@media (max-width: 87.5rem) and (min-width: 80rem) {
    html{
        font-size: 56.25%;

    }
    .hero-paragraph{
        padding: 1.5rem 3rem;
    }
    .divider{
        margin: 2rem auto;
        gap: 0.75rem
    }
    .hero-heading{
        font-size: var(--text-h1);
    }
    .hero-heading2{
        font-size: var(--text-h2);
    }
    body{
        padding: 4rem 8rem;
    }
    .grid{
        min-height: 240px;
        max-width: 300px;
        padding: 1rem;
        margin: 1rem 1rem;
        border: 1px solid var(--grey-base);
        border-radius: 4px;
    }
    figcaption{
    font-size: var(--text-paragraph);
    padding: 0.5rem;
    text-align: justify;
    }
}

/*  SMALL SCREEN LAPTOP : 1024PX - 1280PX */
@media (max-width: 80rem) and (min-width: 64rem) {
    html{
        font-size: 50%;
    }
    .hero-paragraph{
        padding: 1rem 2rem;
    }
    .divider{
        margin: 2rem auto;
        gap: 0.5rem
    }
    .hero-heading{
        font-size: var(--text-h1);
    }
    .hero-heading2{
        font-size: var(--text-h2);
    }
    body{
        padding: 3rem 6rem;
    }
    .grid{
        min-height: 240px;
        padding: 1rem;
        margin: 1rem 1rem;
        border: 1px solid var(--grey-base);
        border-radius: 4px;
    }
    figcaption{
    font-size: var(--text-paragraph);
    padding: 0.5rem;
    text-align: justify;
    }
}

/* TABLET : 768PX - 1024PX */
@media (max-width: 64rem) and (min-width: 48rem) {
    html{
        font-size: 43.75%;
    }
    .hero-paragraph{
        padding: 0.75rem 1.5rem;
    }
    .divider{
        margin: 1.5rem auto;
        gap: 0.5rem
    }
    .hero-heading{
        font-size: var(--text-h1);
    }
    .hero-heading2{
        font-size: var(--text-h2);
    }
    body{
        padding: 2rem 4rem;
    }
    .phylosophy-list{
        gap: 0.1rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 1rem;
        margin: 1rem 0;
    }
    .grid{
     min-height: 240px;
        padding: 1rem;
        margin: 1rem 1rem;
        border: 1px solid var(--grey-base);
        border-radius: 4px;
        
    }
    .intro{
        padding: 1rem;
        margin-bottom: 0.5rem;
    }
    figcaption{
    font-size: var(--text-paragraph);
    padding: 0.5rem;
    text-align: justify;
    }
    .hero-paragraph-project{
    font-size: var(--text-md);
    margin-top: 1rem;
    color: var(--black);
}
}

/* MOBILE IN LANDSCAPE */
@media (max-width: 48rem) and (min-width: 36rem) {
    html{
        font-size: 37.5%;
    }
    .hero-paragraph{
        padding: 0.5rem 1rem;
    }
    .divider{
        margin: 1rem auto;
        gap: 0.5rem
    }
    .hero-heading{
        font-size: var(--text-h1);
    }
    .hero-heading2{
        font-size: var(--text-h2);
    }
    body{
        padding: 1rem 2rem;
    }
    .phylosophy-list{
        gap: 0.1rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 1rem;
        margin: 1rem 0;
    }
    .grid{
        padding: 1rem;
        margin: 1rem 1rem;
        border: 1px solid var(--grey-base);
        border-radius: 4px;
    }
    .intro{
        padding: 1rem;
        margin-bottom: 0.5rem;
    }
    figcaption{
    font-size: var(--text-paragraph);
    padding: 0.5rem;
    text-align: justify;
}
  figcaption{
    font-size: var(--text-paragraph);
    padding: 0.5rem;
    text-align: justify;
}
    .hero-paragraph-project{
    font-size: var(--text-md);
    margin-top: 1rem;
    color: var(--black);
    }
    .intro, .hero-heading{
    height: auto;
    }
}

 /* MOBILE IN POTRAIT */
@media (max-width:36rem) and (min-width:20rem){
  html{
        font-size: 37.5%;
    }
    .hero-paragraph{
        padding: 0.5rem 1rem;
    }
    .divider{
        margin: 1rem auto;
        gap: 0.5rem
    }
    .hero-heading{
        font-size: var(--text-h1);
    }
    .hero-heading2{
        font-size: var(--text-h2);
    }
    body{
        padding: 1rem 2rem;
    }
    .phylosophy-list{
        display: flex;
       flex-direction: column;
       gap: 0.5rem;
    }
    .strengths-list{
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
       
    }
    .grid{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-items: start;
        padding:1rem;
        margin: 1rem 0;
        border: 1px solid var(--grey-base);
        border-radius: 4px;
    }
    .intro{
        padding: 1rem;
        margin-bottom: 0.5rem;
    }
    .divider{
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    figcaption{
    font-size: var(--text-paragraph);
    padding: 0.5rem;
    text-align: justify;
    }
    .hero-paragraph-project{
    font-size: var(--text-md);
    margin-top: 1rem;
    color: var(--black);
    }
    .intro, .hero-heading{
    height: auto;
    }
}