body {
  background-color: rgb(152, 195, 233);
  font-style: oblique;

}

#logo {
  width: 150px;
}

.h1 {
  text-align: center;
  color: rgb(11, 11, 71);
}


.navbar {
  display: flex;
  list-style-type: none;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  justify-content: space-between;
  


  a {
    text-decoration: none;
    color: rgb(162, 68, 68);
    font-size: 24px;
  }

}

.h2 {
  color: rgb(162, 68, 68);

}

.container {
  display: grid;
  height: 50vh;
  /* column-gap: 2em; */
  /* row-gap: 2em; */
  gap: 20px;
  width: 90%;
  margin-inline: auto;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);


}

.long {
  grid-column: 3/5;

}

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

.item1 {
  background-image: url("https://cdn.pixabay.com/photo/2018/07/18/06/36/egg-net-3545650_1280.jpg");
  background-size: cover;
  background-position: center;

  width: 100%;
  height: 100%;
}

.item2 {
  background-image: url("https://cdn.pixabay.com/photo/2018/05/01/18/21/eclair-3366430_1280.jpg");
  background-size: cover;
  background-position: center;

  width: 100%;
  height: 100%;
}

.item3 {
  background-image: url("https://cdn.pixabay.com/photo/2017/09/22/19/05/casserole-dish-2776735_1280.jpg");
  background-size: cover;
  background-position: center;

}

.item4 {
  background-image: url("https://cdn.pixabay.com/photo/2017/03/31/18/02/strawberry-dessert-2191973_1280.jpg");
  background-size: cover;
  background-position: center;

  width: 100%;
  height: 100%;
}

.item5 {
  background-image: url("https://cdn.pixabay.com/photo/2024/01/18/14/26/snack-8517056_1280.jpg");
  background-size: cover;
  background-position: center;
  grid-column: 1/3;
  width: 100%;
  height: 100%;
}

.item6 {
  background-image: url("https://cdn.pixabay.com/photo/2022/02/23/05/10/tiramisu-7030032_1280.jpg");
  background-size: cover;
  background-position: center;

  width: 100%;
  height: 100%;
}


.list {
  text-align: none;
}


.fixed {

  width: 100%;
  background-color: rgba(0, 0, 0, 0.874);
  color: white;
  text-align: center;
  padding: 10px;
   font-size: 18px;


  a {
    text-decoration: none;
    color: rgb(169, 52, 52);

  }
}

.fixed {
  text-decoration: none;
}

@media (width <=700px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    gap: 10px;
  }
  
  .container div {
    width: 100%;
    height: 250px;
  }
}