.banner {
  background: url('../bilder/banners/menu-banner.jpg') no-repeat center center/cover;

}
.banner .button{
    display: flex;
    padding: 10px;
    gap: 10px;
    justify-content: space-between;
    list-style-type: none;    
    z-index: 2;
}

.banner a{
    display: block;
    padding: 10px;
    text-decoration: none;
    color: rgb(0, 0, 0);
    border: 2px solid black;
    background-color: rgb(160, 153, 153);
    width: 10rem;
}
.banner a:hover{
    transform: scale(1.1);
}
main div{
  border: 0px;
}
.restaurant-menu{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
    "frukost a-la-carte main"
    "pizza pasta";
    padding: 1rem;
    background: url('../bilder/restaurant/menu-lunch.jpg') no-repeat center center/cover;

}
.restaurant-menu >h2 ,.restaurant-menu > p,
.drinks-menu > h2, .drinks-menu > p{
    padding: 5px;
    text-align: start;
}
.drinks-menu{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
    "warm-drinks alcoholfree-drinks Beer-drinks"
    "wine-drinks classics-drinks"
    ;
    padding: 1rem;
    background: url('../bilder/restaurant/menu-drinks.jpeg') no-repeat center center/cover;
}

/* Screensizes */

/* Large screens 992px and below */

@media screen and (max-width: 992px) {
  .restaurant-menu, .drinks-menu {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    padding: 2rem 0;
    gap: 2rem;
  }
}

/* Small screens 600px and below */

@media screen and (max-width: 600px){
  .restaurant-menu, .drinks-menu {
    grid-template-columns: 1fr;
    grid-template-rows:repeat(5, 1fr);
    padding: 2rem 0;
    gap: 2rem;
    text-align: center;
  }
  .button a{
    flex-direction: column;
  }
}
@media (max-width:345px){
   .banner a{
    width: 8rem;
   }
}