/* ROOT */
:root{
    --green: #04B90B;
    --blue: #064296;
    --blue-text: #3C4E59;
    --gray: #676767;
    --bkg: #EEEFF3;
}

/* PRODUCTS-SECTION */
#products-section{
    padding: 50px 160px;
}
    /* PRODUCTS-CONTENT */
    .products-content{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .products-content h3{
        font-size: 2.7vw;
        color: var(--blue);
        text-align: center;
    }
    .products-content p{
        color: var(--blue-text);
        font-size: 1rem;
        padding: 30px 160px 50px 160px;
    }

    .products-content video{
        padding-bottom: 90px;
        width: 60vw;
        display: flex;
    }

    /* CARD-PRODUCTS */
    .container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 50px;
    }
    .container a{
        text-decoration: none;
    }
    
    .card {
        text-align: center;
        background-color: #E4E5E9;
    }
        .card p{
            padding: 10px;
            color: var(--blue);
            font-weight: 600;
            font-size: 1.5vw;
        }
        .card img{
            width: 100%;
        }

/*=============== RESPONSIVE 100px - 425px ===============*/
@media (min-width: 100px) and (max-width: 425px){
    #products-section{
        padding: 50px 20px;
    }
    .products-content h3{
        font-size: 9vw;
    }
    .products-content p{
        font-size: 5vw;
        padding: 30px 0 30px 0;
    }
    .products-content video{
        width: 100%;
        padding-bottom: 0;
    }

    /* CARD */
    .container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        row-gap: 50px;
    }
        .card p{
            font-size: 5vw;
        }
}

/*=============== RESPONSIVE 426px - 768px ===============*/
@media (min-width: 426px) and (max-width: 768px){
    #products-section{
        padding: 50px 20px;
    }
    .products-content h3{
        font-size: 6vw;
    }
    .products-content p{
        font-size: 2.7vw;
        padding: 30px 0 30px 0;
    }
    .products-content video{
        width: 100%;
        padding-bottom: 0;
    }

    /* CARD */
    .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 50px;
    }
        .card p{
            font-size: 2.7vw;
        }
}

/*=============== RESPONSIVE 769px - 1280px ===============*/
@media (min-width: 769px) and (max-width: 1280px){
    #products-section{
        padding: 50px 20px;
    }
    .products-content h3{
        font-size: 6vw;
    }
    .products-content p{
        font-size: 2.7vw;
        padding: 30px 0 30px 0;
    }
    .products-content video{
        width: 100%;
        padding-bottom: 0;
    }

    /* CARD */
    .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 50px;
    }
        .card p{
            font-size: 2.7vw;
        }
}