.item2 { grid-column: col / span 3;
  grid-row: row; }
.item3 { grid-column: col 4/ span 3;
  grid-row: row; }
.item1 { grid-column: col  / span 8;
  grid-row: row 6;
  display: grid;
  
  grid-template-columns: repeat(4, [col] auto ) }
  .cercanos {
    grid-column: 1 ;
    grid-row: 1;
  }
  .abiertos {
    grid-column: 3  ;
    grid-row: 1;
  }
  .vacio {
    grid-column: 1/3 ;
    grid-row: 2;
  }
  .antojito {
    grid-column: 1 ;
    grid-row: 3;
  }
  .barbacoa {
    grid-column: 1 ;
    grid-row: 4;
  }
  .china {
    grid-column: 1 ;
    grid-row: 5;
  }
  .vegana {
    grid-column: 1 ;
    grid-row: 6;
  }
  .gordita {
    grid-column: 2 ;
    grid-row: 3;
    
  }
  .hamburguesa {
    grid-column: 2 ;
    grid-row: 4;
  }
  .menudo {
    grid-column: 2 ;
    grid-row: 5;
  }
  .pastel {
    grid-column: 2 ;
    grid-row: 6;
  }
  .pescado {
    grid-column: 3 ;
    grid-row: 3;
  }
  .pizza {
    grid-column: 3 ;
    grid-row: 4;
  }
  .pollo {
    grid-column: 3 ;
    grid-row: 5;
  }
  .taco {
    grid-column: 3 ;
    grid-row: 6;
  }
  .tamal {
    grid-column: 4 ;
    grid-row: 3;
  }
  .torta {
    grid-column: 4 ;
    grid-row: 4;
  }
  
  .item5 { grid-area: footer; }

.grid-container {
  display: grid;
  width: 90%;
  grid-template-columns: repeat(8, [col] auto ) ;
  grid-template-rows: repeat(2, [row] auto  );
  
  gap: 5px;
  background-color: #066706;
  padding: 5px;
}


.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 12px 0;
  font-size: 15px;
}
.grid-container2 {
  display: grid;
  width: 100%;
  grid-template-areas:
    'header header header '
    'menu menu main'
    'footer footer footer';
  gap: 5px;
  background-color: #d22323;
  padding: 5px;
}