.banner{
    display: none;
}

.product-list{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    margin: 2em 0;
    padding: 1em;
}

.product-card{
    width: 100%;
    padding: 1em;
}

.product-image{
    width: 100%;
}

.product-image img{
    width: 100%;
}

.product-description{
    text-align: center;
    margin: 0.3em;
}


@media (min-width: 768px){
    .product-list{
        grid-template-columns: repeat(3, 1fr);
    }
    .banner{
        display: block;
    }
    .product-image{
        padding: 4rem;
        padding-top: 0;
    }
}