html{
  font-family: system-ui;
}

body {
    background-color: #138F04
}

.wrap{
  max-width: 1500px;
  margin: 0 auto;
}

.menu{
  text-align: center;
  background-repeat: no-repeat;
  border-radius: 25px;
  display: flex;
}

.columns{
  display: grid;
  grid-template-columns: repeat(5,1fr);
  column-gap: 1rem;
  row-gap: 1rem;
}

.menu-restaurante{
  color: #000080;
  text-align: center;
  background-repeat: no-repeat;
  border-radius: 5px;
  display: flex;
  flex-flow: column;
}

.logot {
    background-size: 100% auto;
    background-position: top;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    position: relative;
}



.menu-content{
  text-align: left;
  place-self: center;
}

.menu-content h4,
.menu-content p {
  margin: 0; /* Elimina los márgenes */
}

.menu-content h4 span{
  color: black;
  float: float;
  font-style: italic;

}

.letras{
  text-align: center;
  border-radius: 25px;
  background-repeat: no-repeat;
}

hr{
  background: #008000;
  height: 2.5px;
  width: 50px;
  border: none;
}

@media (min-width: 768px) {
   .logor {
     background-size: auto;
   }
 }

@media(max-width:1020px){
  .columns{
    grid-template-columns: repeat(3,1fr);
  }
}

@media (max-width:768px) {
  .columns{
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width:480px) {
  .columns{
    grid-template-columns: repeat(1,1fr);
  }
}