:root {
  --purple-100: hsl(254, 88%, 90%);
  --purple-500: hsl(256, 67%, 59%);
  --yellow-100: hsl(31, 66%, 93%);
  --yellow-500: hsl(39, 100%, 71%);
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 7%);
}
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  height: 100vh;
  background-color: rgb(245, 245, 245);
}
.grid-container {
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(4, 210px);
  grid-template-rows: 95px;
  gap: 1.7rem;
  grid-template-areas:
    "item1 item2 item2 item3"
    "item1 item2 item2 item3"
    "item1 item2 item2 item3"
    "item1 item2 item2 item3"
    "item1 item2 item2 item3"
    "item1 item2 item2 item3"
    "item1 item4 item5 item3"
    "item1 item4 item5 item3"
    "item1 item4 item5 item3"
    "item6 item4 item5 item3"
    "item6 item4 item5 item3"
    "item6 item4 item5 item3"
    "item6 item4 item5 item3"
    "item6 item4 item5 item3"
    "item6 item4 item5 item3"
    "item6 item7 item8 item8"
    "item6 item7 item8 item8"
    "item6 item7 item8 item8"
    "item6 item7 item8 item8"
    "item6 item7 item8 item8"
    "item6 item7 item8 item8"
    "item6 item7 item8 item8"
    "item6 item7 item8 item8"
    "item6 item7 item8 item8";
}
 .item-1 {
  grid-area: item1;
  background-color: var(--yellow-100);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
 .item-1 span {
  font-size: 2rem;
  letter-spacing: -2.8px;
  max-width: 170px;
  margin-left: 5px;
  line-height: 30px;
  font-weight: 500;
}
 .item-1 em {
  color: var(--purple-500);
}
.item-1 img {
  width: 140px;
  margin-top: 20px;
}
 .item-2 {
  grid-area: item2;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--purple-500);
}
 .item-2 p {
  font-size: 2.5rem;
  color: var(--white);
  font-weight: 500;
  text-align: center;
  line-height: 45px;
}
 .item-2 span {
  color: var(--yellow-500);
}
 .item-2 em {
  padding-left: 30px;
}
 .item-2 img {
  width: 140px;
  margin-top: 10px;
}
 .item-2 strong {
  color: var(--white);
  font-size: 0.9rem;
  opacity: 0.7;
  padding-top: 5px;
  font-weight: 400;
}
 .item-3 {
  background-color: var(--purple-100);
  grid-area: item3;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
}
 .item-3 p {
  font-size: 0.9rem;
  padding-top: 20px;
}
 .item-3 span {
  font-size: 1.7rem;
  line-height: 25px;
  font-weight: 500;
  letter-spacing: -2px;
  padding-bottom: 20px;
}
 .item-3 img {
  width: 300px;
  position: relative;
  left: 60px;
  object-fit: cover;
}
 .item-4 {
  grid-area: item4;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
}
 .item-4 img {
  position: relative;
  width: 250px;
  left: 55px;
  top: -10px;
  border-radius: 30px;
}
 .item-4 span {
  font-size: 1.6em;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: -2px;
  padding-left: 20px;
}
 .item-5 {
  grid-area: item5;
  padding-left: 20px;
  background-color: var(--yellow-500);
}
 .item-5 span {
  font-size: 1.8rem;
  line-height: 25px;
  font-weight: 500;
  position: relative;
  top: 30px;
}
 .item-5 img {
  width: 168px;
  position: relative;
  top: 50px;
}
 .item-6 {
  grid-area: item6;
  background-color: var(--yellow-500);
}
 .item-6 span {
  font-size: 1.9rem;
  line-height: 25px;
  font-weight: 500;
  letter-spacing: -2px;
  margin: 20px;
}
 .item-6 img {
  width: 180px;
  margin: 40px 20px 20px 20px;
  height: 190px;
}
 .item-7 {
  grid-area: item7;
  padding: 15px;
  background-color: var(--white);
}
 .item-7 span {
  font-size: 2.9rem;
  font-weight: 500;
}
 .item-7 p {
  font-size: 0.9rem;
  margin-top: 10px;
}
 .item-7 img {
  width: 150px;
  margin-top: 30px;
  margin-left: 7px;
}
 .item-8 {
  grid-area: item8;
  display: flex;
  background-color: var(--purple-500);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
 .item-8 span {
  font-weight: 500;
  font-size: 1.8rem;
  color: var(--white);
}
 .item-8 img {
  padding-right: 20px;
  width: 200px;
}
div {
  border-radius: 5px;
  overflow: hidden;
  font-family: "DM Sans";
  display: flex;
  flex-direction: column;
}
@media (max-width: 905px){
    body {
        height: 100%;
        padding: 20px;
    }
    .grid-container {
        max-width: 400px;
        display: grid;
        grid-template-columns: 350px;
        grid-template-rows: 295px;
        grid-template-areas:
        "item2"
        "item4"
        "item5"
        "item3"
        "item8"
        "item7"
        "item1"
        "item6" ;
    }
    .item-2 p {
        text-align: center;
        padding: 0 40px;

    }
    .item-2 em {
        padding-left: 0px;
      }
      .item-4 img {
        left: 5px;
        top: 5px;
      }
      .item-4 span {
        font-size: 1.4rem;
      }
      .item-5 span {
        font-size: 1.5rem;

        top: 15px;
      }
      .item-5 img {
        top: 30px;
      }
      .item-3 p {
        font-size: 0.9rem;
        margin-bottom :10px;
        text-align: center;
        width: 230px;
      }
      .item-3 img {
        justify-content: center;
        position: static;
        left: 0px;
      }
      .item-3 {
        justify-content: center;
        padding-left: 0;
      }
      .item-3 span {
        margin-top: 10px;
      }
      .item-8 {
        flex-direction: column;
        text-align: center;
      }
      .item-8 span {
        padding: 30px 30px 0 30px;
        font-size: 1.7rem;
        line-height: 30px;
      }
      .item-1 span {
        max-width: 370px;
        margin-left: 20px;
        margin-top: 20px;

      }
      .item-1 img {
        position: relative;
        left: -70px;
      }
      .item-6 span {
        font-size: 2rem;
      }
    }