* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    
}

html {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}

main {
    max-width: auto;
    margin: 0 auto; /* esto hace que no tenga margen ni arriba ni abajo y a los lados siempre este centrado */
}

/* Primera sección  */

.hero {
    display: grid;
    grid-template-columns: minmax(300px, 2fr) 3fr;
    grid-auto-rows: 550px;
    /* margin-left: 100px; */
    padding: 0 100px;
    background-color: #212121;
}

.hero__image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* esta propiedad lo que hace es que nuestra imagen se ajuste al espacio que esta ocupando, no se ve distorcionada ni tampoco nos va a faltar parte de la imagen */
}

.hero__info {
    align-self: center;
}

.hero__title {
    color: #ededed;
    font-size: 3rem;
    font-weight: bolder;
    margin-bottom: 24px;
    font-size: 5rem;
}

.hero__texto {
    color: #ededed;
    font: 1.5rem;
    margin-bottom: 24px;
    font-size: 2rem;
}

.hero__button {
    border: none;
    border-radius: 20px;
    color: #333;
    background-color: #fb8c00;
    font-weight: bolder;
    padding: 12px 24px;
    cursor: pointer;
}

/* Segunda sección  */

.dishes { 
    margin: 100px 0;
}

.dishes__title {
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.5rem;
}

.dishes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 250px));
    grid-auto-rows: 1fr;
    gap: 25px;
    justify-content: center;
}

.dishes__item {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dishes__item--big {
    grid-area: 1 / 1 / 3 / 3; /* es donde inicia columna, inicia fila, termina columna y termina fila */
}

/* Tercera sección  */

.menu {
    margin-bottom: 200px;
}

.menu__title {
    font-size: 2.5rem;
    color: #333;
    font-weight: bolder;
    text-align: center;
    margin-bottom: 50px;
}

.menu__grid {
    display: grid;
    gap: 25px;
    justify-content: center;
    grid-template-columns: repeat(5, minmax(100px, 250px));
    /* grid-template-columns: repeat(auto-fit, 195px); */
    
}

.menu__imagen {
    background-color: #ffebee;
    padding: 15px;
    border-top-left-radius: 40px;
}

.menu__imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

.menu__imagen img:hover{
	transform: scale(1.2);
    transition-duration: 0.4s;
}

/*******  SECCION DE FOOTER  ********/

.footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: #fb8c00;
    padding: 100px;
    justify-content: center;
}

/* .footer__title {
    font-size: 2rem;
    color: #ededed;
} */

.footer__item {
    font-size: 2rem;
    color: #ededed;
    margin: 0 auto;  /* Con esto ya pude centrarlo */
}

/**** PARTE RESPONSIVA  *****/

@media screen and (max-width: 768px) {
    
    .hero {
        grid-template-columns: minmax(300px, 500px);
        justify-content: center;
        /* margin: 0 20px; */
    }
    /* .hero__title {
        font-size: 5rem;
    } */
    .hero__image {
        display: none;
    }
    .dishes {
        margin: 100px 0;
    }
    .dishes__grid {
        grid-template-columns: repeat(auto-fit, minmax(50px, 150px));
    }
    .menu {
        margin: 100px 0px;
    }
    .menu__grid {
        grid-template-columns: repeat(auto-fit, 200px);
    }
    .footer__grid {
        padding: 50px 25px;
        gap: 35px;
        grid-template-columns: repeat(auto-fit, 200px);
    }
    .footer__item {
        margin: 0;  /* Con esto ya pude centrarlo */
    }
}