No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Creando la grilla con 谩rea

10/13
Recursos

Ya estamos en nuestra segunda secci贸n del proyecto. No demoremos m谩s y pasemos a un breve an谩lisis del dise帽o antes de empezar a maquetar en c贸digo.

image.png

Tenemos una imagen grande a la derecha y cuatro peque帽as a la izquierda. Usamos las celdas peque帽as para definir el tama帽o de las celdas de nuestra grilla, porque las celdas ocupan el espacio m铆nimo.

Maquetaci贸n de la grilla

  • Primero debemos crear otra secci贸n.
  • Creamos una etiqueta div con una clase a la que llamaremos con el creativo nombre de 鈥dishes-grid鈥. Creo que no hace falta explicar el porqu茅.
  • Como 煤nicamente manejaremos im谩genes, podemos colocar de forma directa las etiquetas img en lugar de contenerlas en alg煤n div.
  • Agregamos una misma clase para todas las im谩genes, a帽adiendo una segunda clase a la imagen m谩s grande. De esta manera:
        <section class="dishes">
            <h2 class="dishes-title">Out services</h2>
            <div class="dishes-grid">
                <img class="dishes-item dishes-item_big" src="./img/video.png" alt="mesa con platos de pasta">
                <img class="dishes-item" src="./img/dish1.png" alt="bowl de vegetales">
                <img class="dishes-item" src="./img/dish2.png" alt="bowl de vegetales">
                <img class="dishes-item" src="./img/dish3.png" alt="bowl de vegetales">
                <img class="dishes-item" src="./img/dish4.png" alt="bowl de vegetales">
            </div>
        </section>

Estilos de la grilla

  • Llamamos la etiqueta de section desde su clase con .dishes.
  • A帽adimos un margen superior de 100px y de 0 a los lados para separarla de la secci贸n anterior.
.dishes {
    margin: 100px 0;
}
  • Llamamos la etiqueta de section desde su clase con .dishes.
  • Ajustamos su color en #333.
  • Cambiamos el tama帽o de fuente en 2rem y su peso en bold.
  • Le damos un margen inferior de 50px.
  • Centramos el t铆tulo con text-align: center.
.dishes-title {
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 50px;
    font-size: 2rem;
}
  • Llamamos la etiqueta contenedora de las im谩genes con .dishes-grid.
  • Por supuesto, aplicamos display: grid.
  • Creamos cuatro columnas de una fracci贸n cada una con ***grid-template-columns: repeat(4, 1fr)***.
  • Creamos las filas con un alto de una fracci贸n con grid-auto-rows: 1fr.
  • A帽adimos un gap: 25px para crear un espaciado entre las im谩genes.
  • Centramos el contenedor con justify-content: center.
.dishes-grid {
    margin: 100px 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 200px));
    grid-auto-rows: 1fr;
    gap: 25px;
    justify-content: center;
}
  • Llamamos las im谩genes por sus clases con .dishes-item.
  • Le damos un ancho y alto del 100% de su contenedor.
  • Usamos object-fit: cover para que ocupe toda la celda en que se encuentra.
.dishes-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
image.png

Como vemos, funciona. Ahora necesitamos que la primera imagen ocupe cuatro celdas, desde la l铆nea uno, hasta la tres, tanto vertical como horizontalmente.

  • Para ello, llamamos la clase adicional que creamos para la imagen m谩s grande.
  • Delimitamos su 谩rea desde la primera l铆nea horizontal y vertical, hasta la tercera.
.dishes-item_big {
    grid-area: 1/1/3/3;
}
image.png

Retoques de la primera secci贸n

Recordemos que hubo varias partes de nuestra secci贸n anterior sin terminar como la del t铆tulo, subt铆tulo y bot贸n.

  • Primero, creamos una clase para las etiquetas h1, p y button.
  • Llamamos la clase de la etiqueta h1.
  • Ajustamos su color en #333.
  • Cambiamos el tama帽o de fuente en 3rem y su peso en bolder.
  • Le damos un margen inferior de 24px.
.info-title {
    color: #333;
    font-size: 3rem;
    font-weight: bolder;
    margin-bottom: 24px;
}
  • Llamamos la clase de la etiqueta p.
  • Ajustamos su color en #333.
  • Cambiamos el tama帽o de fuente en 1rem.
  • Le damos un margen inferior de 24px.
.info-subtitle {
    color: #333;
    font-size: 1rem;
    margin-bottom: 24px;
}
  • Llamamos la clase de la etiqueta button.
  • Redondeamos las esquinas con border-radius: 20px.
  • Ajustamos su color en #333 y su color de fondo en #fb8c00.
  • Cambiamos el peso de fuente en bolder.
  • Le damos un padding superior e inferior de 12px y arriba y abajo de 24px.
.info-button {
    border: none;
    border-radius: 20px;
    color: #333;
    background-color: #fb8c00;
    font-weight: bolder;
    padding: 12px 24px;
}

隆Y listo! Hemos repasado varias funciones importantes como gap, template, auto-row y grid-area. 驴Verdad que aplicar lo aprendido refuerza mucho m谩s que solo apuntarlo en tus notas?

Ese es el secreto del desarrollo web, as铆 como de la programaci贸n en general. Practicar. 隆Sigamos trabajando en nuestro proyecto!

Contribuci贸n creada por: Jos茅 Miguel Ventimilla (Platzi Contributor).

Aportes 55

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

la profesora juega legue of legends con warwick???鈥欌

Consejo: Agregar a los estilos del button:

cursor: pointer;


HTML

CSS

para no hacer calculos se puede usar el grid template areas y decirle como se van a repartir las grillas, dejo ejemplo

        <section class="dishes">
            
            <h2>Our Services</h2>
            <div class="dishes-grid">
                <img class="dishes-item dishes-item__big" src="images/video.png" alt="">

            <img class="dishes-item dish-1" src="images/dish1.png" alt="">
            <img class="dishes-item dish-2" src="images/dish2.png" alt="">
            <img class="dishes-item dish-3" src="images/dish3.png" alt="">
            <img class="dishes-item dish-4" src="images/dish4.png" alt="">
            </div>

        </section>

鈥 CSS 鈥

.dishes-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    grid-template-areas: 
        "big big img1 img2"
        "big big img3 img4"
    ;
    gap: 26px;
}

.dishes-item__big{
    grid-area: big;
}

.dish-1{
    grid-area: img1;
}


.dish-2{
    grid-area: img2;
}

.dish-3{
    grid-area: img3;
}

.dish-4{
    grid-area: img4;
}

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

mobile:

ipad:

Aqui les dejo como va quedando

VISTA:

CODIGO:

listo

馃槃

Esta quedando muy bonito!

Como importar varias im谩genes con nombres similares usando Emmet Abbreviation

img[src="./images/dish$.png"]*4+img[src="./images/video.png"]

Me encanta maquetar con CSS grid, aunque se me olvide mucho

Esta fue mi decoracion

CSS GRID ES UNA BENDICION , lo que antes me costaba 40 minutos maquetar bien ahora simplemente en 7 lo realizo

COMPUTADORA:

TELEFONO:

El proyecto va quedando genial!
Les comparto mi resultado:

.
Repositorio GitHub: https://github.com/iJCode1/CSS_Grid_Basico-Platzi
.
C贸digo HTML:

<section class="services">
      <h2>OUR SERVICES</h2>
      <div class="services__content">
        <div class="services__one">
          <img class="" src="./images/video.png" alt="A video of food plates">
        </div>
        <div class="services__two">
          <img src="./images/dish1.png" alt="A plate of food">
          <img src="./images/dish2.png" alt="A plate of food">
          <img src="./images/dish3.png" alt="A plate of food">
          <img src="./images/dish4.png" alt="A plate of food">
        </div>
      </div>
    </section>

.
C贸digo CSS:

.services h2{
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
}
.services__content{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 25px;
}
.services__one{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  grid-template-areas: 
  "img img"
  "img img";
}
.services__one img:nth-child(1){
  grid-area: img;
}
.services__two{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 15px;
}
.services img{
  height: 100%;
  object-fit: cover;
  width: 100%;
}
* {
    /* margin: 0; */
    /*padding: 0; */
    font-family: Roboto, sans-serif;
}

:root {
    --space-base: 30px;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
}

.hero {
    display: grid;
    grid-template-columns: 2fr minmax(100px, 3fr);;
    max-height: 550px;
    grid-auto-rows: 400px;
    margin-left: 30px;
    margin-top: 10px;
    border-bottom: 1px solid #ddd;

}

.hero--image {
    width: 90%;
    display: grid;
    height: 90%;
    object-fit: contain;
}

.title
{
    font-size: 1.2rem;
    margin-bottom: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

h1 {
    font-size: 4.5rem;
    font-weight: 900px;
    line-height: 4.8rem;
  }
  
.p--info {
    margin: var(--space-base) 0;
    align-self: center;
    font-size: 1.5rem;
    border-bottom: 240px;
}
  
.button--info {
    padding: calc(var(--space-base) / 3) var(--space-base) ;
    font: inherit;
    color: white;
    background: linear-gradient(180deg, rgb(250, 172, 116) 25%, rgba(225,116,48,1) 100%);
    border: none;
    border-radius: var(--space-base);
    outline: inherit;
    cursor: pointer;
}
  

.services{
    display: grid;
    margin-top: 200px;
}

.services--title {
    color: #333;
    font-size: 3rem;
    font-weight: 400px;
    text-transform: uppercase;
    text-align: center;
    margin: 100px 0 50px 0;
  }
  
  .dishes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    grid-template-rows: repeat(2, minmax(150px, 1fr));
    grid-gap: 50px;
  }
  
  .dishes--images {
    margin: 0;
  }
  
  .dishes--images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .dishes--images__big {
    grid-area: 1 / 1 / 3 / 3;
  }
  
  /* Third section - menu */
  
  .menu--title {
    color: #333;
    font-size: 3rem;
    font-weight: 400;
    text-align: center;
    margin: 100px 0 50px 0;
  }
  
  .plates {
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 100px;
  }
  
  .plates--images {
    margin: 0;
    background-color: #ffebee;
    padding: 20px;
    border-top-left-radius: 30px;
  }
  
  .plates--images img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
<!DOCTYPE html>
<html lang="en">
<link>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="grid4.css"></link>
    <title>Grid 4</title>
</head>
<body>
    <main>
        <section class="hero">
            <div class="title">
                <h1>Check the <br>best food</h1>
                <p class="p--info">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed quaerat voluptate assumenda. Veniam praesentium velit eveniet facilis inventore assumenda magni, voluptatem cupiditate, maxime itaque enim quo tempora veritatis esse minima?</p>
                <button class="button--info">Book a table</button>  
            </div>
            <figure class="hero--image">
                <img class="hero--image" src="./images/hero.png" alt="Pasta Dish with neapolitan sauce and vegetables">
            </figure>
        </section>
  
    <section class="services">
        <h2 class="services--title">Our services</h2>
        <div class="dishes">
            <figure class="dishes--images dishes--images__big">
                <img src="./images/video.png" alt="Pasta video">
            </figure>
            <figure class="dishes--images">
                <img src="./images/dish1.png" alt="A bowl of vegetables with rice and avocado">
            </figure>
            <figure class="dishes--images">
                <img src="./images/dish2.png" alt="Avocado and egg toast">
            </figure>
            <figure class="dishes--images">
               <img src="./images/dish3.png" alt="Asparagus with tomato and butter">
            </figure>
            <figure class="dishes--images">
                <img src="./images/dish4.png" alt="Eggs and guacamole toast ">
            </figure>
        </div>
    </section>
    <section class="menu">
        <h2 class="menu--title">Home menu</h2>
        <div class="plates">
            <figure class="plates--images">
                <img src="./images/plate1.png" alt="pasta with neapolitan sauce and vegetables">
            </figure>
            <figure class="plates--images">
                <img src="./images/plate2.png" alt="pasta with broccoli and carrot">
            </figure>
            <figure class="plates--images">
                <img src="./images/plate3.png" alt="pesto pasta">
            </figure>
            <figure class="plates--images">
                <img src="./images/plate4.png" alt="pasta with avocado and corn">
            </figure>
            <figure class="plates--images">
                <img src="./images/plate5.png" alt="bowl of chicken, tomato and carrots">
            </figure>
        </div>
    </section>
    </main>
</body>

segunda seccion con un poco de box-shadow

Mi aporte con SASS

Consejo para los colores usen variables, es un viaje de ida.

  • Primero las declaran:
    ![](

  • y luego las van llamando con var(鈥榥ombre de la variable鈥)
    ![](
    Esto les va a permitir hacer cambios de manera m谩s r谩pida a los colores si es que necesitan hacer alg煤n cambio de esos.
    Espero les sirva!

me llegue a frustrar en un momento porque no me estaba quedando igual鈥 pero era porque no hab铆a guardado 馃槕馃槕馃槕

Vamos bien, est谩 quedando genial

Le agregue algunos detalles que vi en el template de inspiraci贸n.

Comparto mis resultados:

resultado de la clase:

馃槂 Este curso esta genial

con la nueva configuracion de la pagina ya no aparecen los recursos, le doy click a recursos y no aparecen, o no se donde mas buscarlos

ah铆 va quedando 馃構

https://iecgerman.github.io/pastas/

Esto juntandolo con responsive design cuesta un poco m谩s e.e

Mi avance - secci贸n 2


Pongo mi aporte, lo estoy trabajando con SASS y cambios, solo un mixin para poder ahorrar condigo con las imagenes


      <article class="outServices">
        <h2 class="outServices__title">Our services</h2>
        <div class="outServices__content">
          <figure
            class="outServices__content--image outServices__content--image--big"
          >
            <img
              src="./images/video.png"
              alt="video of pasta dishes being served"
            />
          </figure>
          <figure class="outServices__content--image">
            <img
              src="./images/dish1.png"
              alt="bowl of vegetables with rice and avocado"
            />
          </figure>
          <figure class="outServices__content--image">
            <img src="./images/dish2.png" alt="Avocado and egg toast" />
          </figure>
          <figure class="outServices__content--image">
            <img
              src="./images/dish3.png"
              alt="asparagus with tomato and butter"
            />
          </figure>
          <figure class="outServices__content--image">
            <img src="./images/dish4.png" alt="eggs and guacamole toast " />
          </figure>
        </div>
      </article>
.outServices {

    &__title {
        @include subtitles();
    }

    &__content {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);

        gap: 20px;

        &--image {
            img {
                @include imageContainer();
            }

            &--big {
                grid-area: 1/1/3/3;
            }
        }
    }
}

@mixin imageContainer {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Tengo de todos modos una confusi贸n entre usar align-items o justify-content. Uno ve a la profe usar los elementos y todo va quedando chevere pero cuando le toca a uno solito no se sabe que escribir. Investigando en internet encontr茅 este recurso por si a alguien le intereza empezar a salir de dudas
https://codepen.io/enxaneta/full/adLPwv/

NICE

HTML:

CSS:

Buenas noches profe Estefany, agradecerle su gran empe帽o en este curso, siento que fue un gran proyecto donde pudimos ver detalladamente la utilidad que le podemos dar a nuestros proximos proyectos personales, nuevamente muchas gracias.

No s茅 ustedes. Pero yo este lo hice fue con grid-templete-area

As铆 me quedo esta segunda parte 馃崫

<section class="our-services">
  <h2>OUR SERVICES</h2>
  <div class="dishes">
    <img class="video-img" src="https://i.postimg.cc/k5qHRc5H/video.png" alt="Video de comida">
    <div class="dish dish1">
      <p>26$</p>
      <img class="dish-img" src="https://i.postimg.cc/qR0pRyfB/dish1.png" alt="">
    </div>
    <div class="dish dish2">
      <p>26$</p>
      <img class="dish-img" src="https://i.postimg.cc/Wp5sNd5j/dish2.png" alt="">
    </div>
    <div class="dish dish3">
      <p>26$</p>
      <img class="dish-img" src="https://i.postimg.cc/hPwgmHF5/dish3.png" alt="">
    </div>
    <div class="dish dish4">
      <p>26$</p>
      <img class="dish-img" src="https://i.postimg.cc/MG08hHnC/dish4.png" alt="">
    </div>
  </div>
</section>
.our-services h2 {
  margin-top: var(--space-base);
  font-weight: 500;
  text-align: center;
}

.dishes {
  margin: var(--space-base) 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 220px));
  grid-template-rows: 1fr;
  gap: calc(var(--space-base));
  justify-content: center;
}

.video-img,
.dish-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dishes .video-img {
  grid-area: 1/1/3/3;
}

.dish {
  position: relative;
}

.dishes p {
  position: absolute;
  left: 10px;
  bottom: 10px;

  font-size: 2.2rem;
  color: white;
  text-shadow: 1px 1px 2px #1b1b1b;
}

listo vamos por buen camino .

Los comentarios alterados por el fondo de escritorio de la profe jaja

.service__container {
    margin: 100px 0;
}

.service__title {
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
    font-size: 2rem;
}

.service__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 200px));
    grid-auto-rows: 1fr;
    grid-template-areas: 
    "video video first second"
    "video video third fouth";
    justify-content: center;
    gap: 20px;
}

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

.service__video {
    grid-area: video;
}

.service__first-img {
    grid-area: first;
}

.service__second-img {
    grid-area: second;
}

.service__third-img {
    grid-area: third;
}

.service__fouth-img {
    grid-area: fourth;
}

pues ya, as铆 qued贸.
Nota: Es mejor si ya tienes tus im谩genes en los tama帽os correctos

HTML

CSS

Yo lo resolv铆 con el grid-template-areas, me resulta mucho m谩s f谩cil de ubicarme:

<CSS3>  
*{
    font-family: 'Roboto', sans-serif;
}

main{
    max-width: 1200px;
    margin: 0 auto;
}

.hero{
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-auto-rows: 400px;
    border-bottom: 1px solid #ddd;
}

.hero-image{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.info{
    align-self: center;
}

.info-title{
    color: #333;
    font-size: 3rem;
    font-weight: bolder;
    margin-bottom: 24px;
}


.info-subtitle{
    color: #333;
    margin-bottom: 24px;
    font-size: 1.5rem;
}
.info-button{
    border: none;
    border-radius: 20px;
    color: #333;
    background-color: #fb8c00;
    font-weight: bolder;
    padding: 12px 24px;
}

.dishes{
    margin: 100px 0;
}

.dishes-title{
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 50px;
}
.dishes-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 200px));
    grid-auto-rows: 1fr;
    grid-template-areas: 
    "header header main1 main3"
    "header header main2 main4";
    gap: 25px;
    justify-content: center;
}

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


.dishes-item__big{
    grid-area: header;
}

.dish-1{
    grid-area: main1;
}


.dish-2{
    grid-area: main2;
}

.dish-3{
    grid-area: main3;
}

.dish-4{
    grid-area: main4;
}

<HTML> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <section class="hero">


        <div class="info">
            <h1 class="info-title">Check the</br>best food</h1>
            <p class="info-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum maiores veritatis eum! Consectetur dicta repellendus delectus vitae, hic totam, qui, ratione dolore enim culpa accusantium perspiciatis accusamus atque dolor molestiae?</p>

            <button class="info-button">Book a table</button>
        </div>
        <img class="hero-image" src="./images/hero.png" alt="hero">
    </section>

    <section class="dishes">
        <h2 class="dishes-title"> Our Services</h2>
        <div class="dishes-grid">
        <img class="dishes-item dishes-item__big" src="./images/video.png" alt="video">

        <img class="dishes-item dish1" src="./images/dish1.png" alt="bowl de vegetales">

        <img class="dishes-item dish2" src="./images/dish2.png" alt="bowl de vegetales">

        <img class="dishes-item dish3" src="./images/dish3.png" alt="bowl de vegetales">

        <img class="dishes-item dish4" src="./images/dish4.png" alt="bowl de vegetales">
    </div>
    </section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Style.css">
    <title>Document</title>
</head>
<body>
    <div class="main">
        <header class="header-container">
            <div class="information">
                <h1>Check the <br> best food</h1>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione, similique, sequi perspiciatis labore qui culpa quisquam deserunt asperiores eos vel pariatur sed corporis nesciunt? Repellendus, voluptate fugiat. Cupiditate, veritatis nulla voluptas culpa placeat voluptatibus! Error voluptas dolor doloribus perferendis nam.</p>
                <button class="primary-button">Book a Table</button>
            </div>
            <div class="logo">
                <img src="/imagenes/hero.png" alt="logo">
            </div>
        </header>

        <main class="dishes-container">
            <h1 class="dishes-title">Our services</h1>
            <div class="dishes">
                <img class="dish-item dish-item_1" src="/imagenes/video.png">
                <img class="dish-item dish-item_2" src="/imagenes/dish1.png">
                <img class="dish-item dish-item_3" src="/imagenes/dish2.png">
                <img class="dish-item dish-item_4" src="/imagenes/dish3.png">
                <img class="dish-item dish-item_5" src="/imagenes/dish4.png">
            </div>
        </main>
    </div>
</body>
</html>
html {
    font-size: 62.5%;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto' , sans-serif;
}

.main {
    max-width: 120rem;
    margin: 0 auto;
}

.header-container {
    display: grid;
    grid-template-columns: 2fr 3fr;
    max-height: 50rem;
    border-bottom: .1rem solid goldenrod;
}

.logo img {
    width: 100%;
    height: 50rem;
    object-fit: contain;
}

.information {
    place-self: center;
}

.information h1 {
    font-weight: bold;
    font-size: 5rem;
    margin-bottom: .8rem;
}

.information p {
    font-size: 1.6rem;
    margin-bottom: 4rem;
}

.primary-button {
    padding: 1.2rem .8rem;
    border: none;
    border-radius: 2rem;
    background: #fb8c00;
    color: white;
    font-size: 1.6rem;
    cursor: pointer;
}

.dishes {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    gap: .8rem
}

.dish-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.6rem;
    border: .3rem solid green;
}

.dish-item_1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.dishes-title {
    margin: .8rem 0 3rem 0;
    font-weight: bold;
    font-size: 5rem;
    text-align: center;
}