@media (max-width: 576px) {
    header{
        width: 100%;
        height: 10vh;
    }
    nav{
        flex-direction: column;
        width: 100%;
        height: 50vh;
        margin-top: 9vh;
        overflow-y: scroll;
        overflow-x: hidden;
        filter: inherit;
        transform: translateX(-100%);
        transition-duration: 1s;
    }
    nav.active{
        transform: translateX(0);
    }
    nav a{
        font-size: 2rem;
        padding-bottom: 4rem;
        padding-top: 1rem;
    }
    .last{
        padding: 0 0 2rem 0;
    }
    .menu{
        width: 50%;
        height: 10vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .menu .bx{
        font-size: 3em;

    }
    .cart{
        position: inherit;
        justify-content: center;
        width: 50%;
    }
    section{
        margin: auto;
        margin-top: 0;
        margin-bottom: 10vh;
        width: 70%;
        height: 80vh;
        grid-template-columns: repeat(3, 1fr) ;
        grid-template-rows: repeat(8,1fr) ;
    }
    #image1{
        grid-area: 1/1/2/2;
    }
    #image2{
        grid-area: 2/1/3/2;
    }
    #image3{
        grid-area: 3/1/4/2;
    }
    #image4{
        grid-area: 4/1/5/2;
    }
    .product-image{
        width: auto;
        height: auto;
        margin-bottom: 1rem;
    }
    .main-product-image{
        grid-area: 1/2/5/9;
        width: 100%;
        height: 100%;
        margin: 0;
        margin-left: 1rem;
    }
    .product-description{
        grid-area: 5/1/8/4;
        margin-top: 2rem;
        justify-content: inherit;
    }
    .product-order{
        grid-area: 8/1/9/4;
    }
    .product-price{
        font-size: 2rem;
    }
    .product-discounted del{
        font-size: 1rem ;
        position: initial;
    }
    .purchase{
        width: 50%;
        height: 80%;
        margin-top: 1rem;
    }
    .carrito-compras{
        width: 90%;
        height: 90vh;
    }
    .order-details #st-total{
        padding-top: .4rem;
        padding-left: 2rem;
        font-size: 2rem;
    }
    .main-section .products .product p{
        display: flex;
        justify-content: center;
    } 
    .order-details #total-sum{
        margin-top: 0.4rem;
        font-size: 2rem;
    }
    .make-purchase{
        width: 70%;
        height: 30%;
        margin: auto;
        margin-top: 1rem;
    }
    .product-stars{
        font-size: 1.5rem;
    }
    .main-1-3 #image3{
        padding-top: 2rem;
    }
    .carrito-compras img{
        width: 120px;
    }
}