* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  width: 100%;
  height: 100%;
}

main {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 25vw 1fr 1fr 1fr;
  grid-template-rows: 28vw 1fr;
  grid-template-areas: "box-1 box-2 box-2 box-2" "box-1 box-3 box-4 box-5";
  gap: 1rem;
  padding: 1rem;
  background-color: rgb(205, 200, 200);
}
main .box {
  border-radius: 1rem;
  background-size: cover;
  background-position: center;
}
main .box-1 {
  background-color: red;
  grid-area: box-1;
  background-image: url(assets/images/box-1-img.avif);
}
main .box-2 {
  background-color: darkgoldenrod;
  grid-area: box-2;
  background-image: url(assets/images/box-2-img.avif);
}
main .box-3 {
  background-color: pink;
  grid-area: box-3;
  background-image: url(assets/images/box-3-img.avif);
}
main .box-4 {
  background-color: lightcoral;
  grid-area: box-4;
  background-image: url(assets/images/box-4-img.avif);
}
main .box-5 {
  background-color: cyan;
  grid-area: box-5;
  background-image: url(assets/images/box-5-img.avif);
}

@media (max-width: 768px) {
  main {
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 2fr 2fr 2fr 2fr;
    grid-template-areas: "box-1" "box-2" "box-3" "box-4" "box-5";
  }
}/*# sourceMappingURL=style.css.map */