:root {

    /* Primary Colors */
    --primary-red: hsl(0, 78%, 62%);
    --primary-cyan: hsl(180, 62%, 55%);
    --primary-orange: hsl(34, 97%, 64%);
    --primary-blue: hsl(212, 86%, 64%);

    /* Neutral Colors */
    --grey-500: hsl(234, 12%, 34%);
    --grey-400: hsl(212, 6%, 44%);
    --white: hsl(0, 0%, 100%);

    /* Font  */
    --font-primary: "Poppins", sans-serif;

    /* Font Weights */
    --font-weight-light: 200;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
}


/* Element-level Global Styling */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    font-family: var(--font-primary);
    font-weight: var(--font-weight-regular);
    color: var(--grey-500);
    background-color: var(--white);
    line-height: 1.6;
    font-size: 0.9375rem; /* 15px */

    display: grid;
    place-items: center;
    min-height: 100vh;
}

.container{
    width:min(84%, 70rem); /* 1120px */
}

.card{
    max-width: 350px;
    height: 15.625rem; /* 250px */
    border: none;

    p{
        font-size:0.875rem; /* 14px */;
    }
}

.grid-container{
    display: grid;

    gap: var(--space-400);
}

.cyan{ border-top: 5px solid var(--primary-cyan);}

.blue{ border-top: 5px solid var(--primary-blue);}

.red{ border-top: 5px solid var(--primary-red);}

.orange{ border-top: 5px solid var(--primary-orange);}


/*** Utility Classes ***/

/* Spacing */

.mb-6{
    margin-bottom: 2rem; /* 32px */
}

.p-6{
    padding: 1.875rem; /* 30px */

}


/* Media Queries */

@media (min-width:576px){
    .w-sm-75{
        width: 75%;
    }
}

@media(min-width:768px){

    .w-md-60{
        width: 60%;
    }

    .grid-container{

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

        /* grid-template-areas: arranging how cards to be laid out on page.
        Could be thought as blueprint of layout
        */
        grid-template-areas: 
        ".   one one   ."
        "two two three three"
        ".   four four .";
    }


    /* If card are defined outside of media query, they are overlapped  */

    .card:nth-child(1){
        grid-area: one;
    }

    .card:nth-child(2){
        grid-area: two;
    }

    .card:nth-child(3){
        grid-area: three;
    }

    .card:nth-child(4){
        grid-area: four;
    }

}

@media (min-width:1000px){
    .w-lg-45{
        width: 45%;
    }

    .grid-container{

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

        /* grid-template-areas: arranging how cards to be laid out on page.
        Could be thought as blueprint of layout
        */
        grid-template-areas: 
        ".   two   ."
        "one two   four"
        "one three four"
        ".   three .";
    }
}