.product{
    background-color: #037bc0;
    text-align: center;
    color: white;
}
.product-info{
    padding: 2rem 2rem;
}
.product-info h3{
    margin:0 0;
}

.producto-price{
    font-weight: 900;
    font-size: 2rem;
}
 /*utilidad*/
 .columna{
    display: flex;
    flex-direction: column;
}

/* Button */
.product a{
    text-decoration: none;
    color: #FFF;
    background-color: #8cbc00;
    display: block;
    text-transform: uppercase;
    font-weight: 700;
    padding: 1rem;

    transition: background-color .4s ease-out;
}

.product a:hover{
  background-color: #7b9d13;
}
  /*hover image*/
  .list-products img{
    transition: transform .3s ease-in-out;
}
.list-products img:hover{
   transform: scale(.9);
}

@media(min-width: 768px){ 
    /*Modelando el grid*/
    .list-products{
        display: grid;
        grid-template-columns:repeat(6,1fr);
        gap: 2rem;
    }
    .product:nth-child(1){
        grid-column:1/7;
    }
    .product:nth-child(2){
      grid-column:1/4;
    }
    .product:nth-child(3){
        grid-column:4/7;
    }
    .product:nth-child(4){
       grid-column: 1/3;
    }
    .product:nth-child(5){
      grid-column:3/5;
    }
    .product:nth-child(6){
       grid-column:5/7;
    }
    /*fila primer producto*/
    .fila-producto1{
        display: grid;
        grid-template-columns: repeat(4,1fr);
    }
    
    .fila-producto1 img{
        grid-column: 1/4;
        width: 100%;
        height: 60rem;
        object-fit: cover;
    }
    .fila-producto1 .product-info{
        grid-template-columns: 4/5;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .columna img{
        width: 100%;
        height: 30rem;
        object-fit: cover;
    }
}