@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype");
  font-size: normal;
  font-weight: normal;
}
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  background-color: whitesmoke;
  font-family: "DM Sans" sans-serif;
  font-size: 18px;
  min-height: 100vh;
  padding: 1rem;
  display: grid;
  align-items: center;
  justify-content: center;
  place-content: center;
}
.container {
  max-width: 100%;
  background-color: transparent;
  display: grid;
  gap: 15px;
}
.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8 {
  border-radius: 10px;
  box-shadow: 2px;
  max-width: 100%;
}
.grid1 {
  background-color: hsl(256, 67%, 59%);
  color: hsl(0 0% 100%);
  padding: 15px 10px;
  text-align: center;
}
.grid1 span {
  color: hsl(39, 100%, 71%);
}
.grid1 img {
  max-width: 100%;
}
.grid1 p {
  font-size: 1.5rem;
  font-family: "DM Sans";
}
.grid2 {
  background-color: white;
  padding: 15px 10px;
}
.grid2 h1 {
  font-size: 1.5rem;
}
.grid2 img {
  max-width: 100%;
  display: block;
}
.grid3 {
  height: 300px;
  background-color: hsl(39, 100%, 71%);
  padding: 15px 10px 0px 10px;
  overflow: hidden;
}
.grid3 img {
  height: 210px;
  max-width: 100%;
  border-radius: 10px;
  margin-top: 15px;
  margin-bottom: 0px;
}
.grid4 {
  background-color: hsl(254, 88%, 90%);
  padding: 10px;
}
.grid4 h1 {
  font-size: 2rem;
}
.grid4 img {
  width: 100%;
  margin-bottom: 10px;
  margin-top: 10px;
}
.grid4 p {
  font-size: 1.2rem;
  padding-bottom: 10px;
}
.grid5 {
  background-color: hsl(256, 67%, 59%);
  color: white;
  padding: 15px 10px;
  text-align: center;
}
.grid5 img {
  max-width: 100%;
  text-align: center;
}
.grid6 {
  background-color: white;
  padding: 15px 10px;
}
.grid6 img {
  margin-top: 12px;
  max-width: 100%;
  display: block;
}
.grid6 h1 {
  margin-bottom: 5px;
}
.grid7 {
  background-color: hsl(31, 66%, 93%);
  padding: 15px 15px;
}
.grid7 img {
  max-width: 100%;
  margin-top: 15px;
  display: block;
}
.grid7 span {
  color: hsl(256, 67%, 59%);
}
.grid8 {
  background-color: hsl(39, 100%, 71%);
  padding: 15px 10px;
}
.grid8 img {
  max-width: 100%;
  margin-top: 10px;
  display: block;
}

@media screen and (min-width: 510px) {
  .container {
    background-color: transparent;
    max-width: 1000px;
    display: grid;
    gap: 10px;
    grid-auto-columns: 1fr;
    grid-template-areas:
      "box1 box2"
      "box3 box4"
      "box5 box6"
      "box7 box8";
  }
  .container .grid1 {
    grid-area: box1;
    
  }
  .container .grid1 p {
    font-size: 1rem;
    font-weight: 100;
  }
  .container .grid2 {
    grid-area: box4;
  }
  .container .grid3 {
    grid-area: box2;
  }
  .container .grid4 {
    grid-area: box5;
  }
  .container .grid5 {
    grid-area: box6;
  }
  .container .grid6 {
    grid-area: box3;
  }
  .container .grid7 {
    grid-area: box8;
  }
  .container .grid8 {
    grid-area: box7;
  }
}

@media screen and (min-width: 830px) {
  body {
    font-family: "DM Sans" sans-serif;
    min-height: 200vh;
    display: flex;
    align-items: center;
    justify-content: center;
    place-content: center;
  }
  .container {
    background-color: transparent;
    max-width: 1000px;
    display: grid;
    gap: 10px;
    grid-auto-columns: 1fr;
    grid-auto-rows: 70px;
    grid-template-areas:
      "box1 box2 box2 box3"
      "box1 box2 box2 box3"
      "box1 box2 box2 box3"
      "box1 box2 box2 box3"
      "box1 box5 box6 box3"
      "box4 box5 box6 box3"
      "box4 box5 box6 box3"
      "box4 box7 box8 box8"
      "box4 box7 box8 box8"
      "box4 box7 box8 box8";
  }
  .container .grid1 {
    grid-area: box2;
    padding: 1rem;
    text-align: center;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .container .grid1 h1 {
    font-size: 2rem;
    font-weight: 500;
  }
  .container .grid1 img {
    margin-bottom: 10px;
    margin-top: 20px;
    max-width: 50%;
  }
  .container .grid1 p {
    font-size: 1rem;
    font-weight: 100;
  }
  .container .grid2 {
    grid-area: box5;
    padding: 1rem 2rem 1rem 2rem;
    position: relative;
  }
  .container .grid4 {
    grid-area: box3;
    padding: 2rem 0.1rem 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
  }
  .container .grid4 img {
    height: 300px;
    width: 300px;
  }
  .container .grid4 h1 {
    font-size: 1.8rem;
  }
  .container .grid4 p {
    font-size: 1rem;
  }
  .container .grid7 {
    grid-area: box1;
    padding: 4rem 2rem 0 2rem;
  }
  .container .grid8 {
    grid-area: box4;
    padding: 1.75rem 2.25rem;
  }
  .container .grid3 {
    height: 215px;
    max-width: 100%;
    grid-area: box6;
    padding: 1rem;
    overflow: hidden;
  }
  .container .grid3 h1 {
    font-size: 1rem;
  }
  .container .grid3 img {
    height: 210px;
    max-width: 100%;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 0px;
  }

  .container .grid6 {
    grid-area: box7;
    padding: 1.5rem;
  }
  .container .grid5 {
    grid-area: box8;
    padding: 1rem;
    display: flex;
    gap: 5px;
  }

  .grid1 img,
  .grid2 img,
  .grid5 img .grid6 img,
  .grid7 img,
  .grid8 img {
    max-width: 100%;
  }
}