/*Estilos de los productos*/
.product-list{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.product{
    width: 300px;
    margin-bottom: 30px;
    transition: all 0.3s ease-in-out;
}

.product img{
    width: 90%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 50%;
}

.product:hover{
    /*Boton de menu transicion*/
    transform: scale(1.1);
    
}

.bebidas-calientes{
    text-align: center;
    padding: 20px;
    background-color: rgb(221, 180, 180);
    width: 100%;
    height: fit-content;
}

.bebidas-frias{
    text-align: center;
    padding: 20px;
    background-color: rgb(134, 238, 186);
    width: 100%;
    height: fit-content;
}

.postres{
    text-align: center;
    background-color: rgb(252, 178, 148);
    width: 100%;
    height: fit-content;
    padding: 20px;
}

.postres-seccion, .equipo{
    padding: 50px;
    text-align: center;
    background-color: rgb(250, 241, 236);
}

.grid-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    gap: 30px;/*Espaciado entre objetos*/
}

.postres-seccion img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 0 30%;
}

.postre{
    transition: all 0.3s ease-in-out;
}

.postre:hover{
    transform: scale(1.1);
}

.equipo{
    background-color: rgba(250, 235, 215, 0.911);
}

.equipo-container{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

h2{
    margin-bottom: 20px;
    color: rgb(117, 66, 32);
}

.miembro{
    width: 200px;
    margin-bottom: 35px;
}

.miembro img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

.sandwiches{
    padding: 50px;
    text-align: center;
}

.contenedor-sandwich{
    display: grid;
    grid-template-columns: repeat(4, 1fr);/*4 columnas de igual tamaño*/
    grid-template-rows: repeat(2, 1fr); /*2 filas de 250px*/
    gap: 15px;
    grid-template-areas: 
    "sandwich1 sandwich1 sandwich2 sandwich3"
    "sandwich1 sandwich1 sandwich4 sandwich5";
}

.sandwich{
    align-content: center;
    border: 2px solid rgb(99, 9, 182);
    padding: 20px;
    background-color: rgba(247, 226, 218, 0.618);
    transition: all 0.3s ease-in-out;
}

.sandwich:hover{
    transform: scale(1.05);
    background-color: antiquewhite;
}

.sandwich img{
    width: 100%;
    height: 40%;
    object-fit: cover;
    margin-bottom: 10px;
}

/*Asignar areas a los sandwiches*/
.sandwich:nth-child(1){grid-area: sandwich1;}
.sandwich:nth-child(2){grid-area: sandwich2;}
.sandwich:nth-child(3){grid-area: sandwich3;}
.sandwich:nth-child(4){grid-area: sandwich4;}
.sandwich:nth-child(5){grid-area: sandwich5;}

@media screen and (max-width:768px){
    .contenedor-sandwich{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 10px;
        grid-template-areas:
        "sandwich1 sandwich1"
        "sandwich2 sandwich3"
        "sandwich4 sandwich5";
    }

    .sandwich{
        padding: 10px;
    }
    
    .sandwich img{
        width: 100%;
        height: 35%;
        object-fit: cover;
        margin-bottom: 5px;
    }
}