@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

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

img {
  max-width: 100%;
}

body {
  font-size: 16px;
  font-family: "DM Sans", sans-serif;
  background-color: rgb(243, 243, 243);
}

:root {
  /* Colors */
  --purple100: #dbd1fc;
  --purple500: #7551dc;
  --yellow100: #f9eee2;
  --yellow500: #ffcc6a;
  --white: #fff;
  --black: #121212;

  /* Typography */
  --font-size-vlg: 3.875rem;
  --font-size-lg: 2.5rem;
  --font-size-m: 2rem;
  --font-size-s: 1.125rem;
}

.text-preset-1 {
  font-size: var(--font-size-vlg);
  line-height: 93.5%;
  letter-spacing: -0.1875rem;
}
.text-preset-2 {
  font-size: var(--font-size-lg);
  line-height: 90%;
  letter-spacing: -0.125rem;
  font-weight: 500;
}
.text-preset-3 {
  font-size: var(--font-size-m);
  line-height: 87.5%;
  letter-spacing: -0.125rem;
  font-weight: 500;
}
.text-preset-4 {
  font-size: var(--font-size-s);
  line-height: 111%;
  letter-spacing: 0px;
  font-weight: 500;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  max-width: 1400px;
  justify-content: center;
  align-items: center;
}

.div1 {
  grid-area: 1 / 1 / 6 / 2;
  background-color: var(--yellow100);
  padding: 78.32px 32px;
  border-radius: 10px;
  max-width: 256px;
  height: 100%;
  color: var(--black);
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

.div1 img {
  margin-top: 1.5rem;
}

.div1 h2 span {
  color: var(--purple500);
}

.div2 {
  grid-area: 6 / 1 / 11 / 2;
  background-color: var(--yellow500);
  max-width: 256px;
  padding: 24px;
  border-radius: 10px;
  opacity: 0;
  animation: fadeIn 1s forwards;
}

.div2 img {
  margin-top: 55.5px;
}

.div3 {
  grid-area: 1 / 2 / 5 / 4;
  max-width: 544px;
  height: 100%;
  border-radius: 10px;
  display: flex;
  background-color: var(--purple500);
  flex-direction: column;
  align-items: center;
  color: var(--white);
  padding: 62px 32px;
  opacity: 0;
  animation: fadeIn 1.5s forwards;
}

.div3 h1 {
  text-align: center;
}

.div3 span:first-child {
  color: var(--yellow500);
}

.div3 span:nth-child(2) {
  font-style: italic;
}

.div4 {
  grid-area: 5 / 2 / 8 / 3;
  background-color: var(--white);
  padding: 24px;
  max-width: 247px;
  height: 100%;
  border-radius: 10px;
  opacity: 0;
  animation: fadeIn 2s forwards;
}

.div4 h3 {
  margin-top: 20px;
}
.div5 {
  grid-area: 5 / 3 / 8 / 4;
  background-color: var(--yellow500);
  padding: 24px;
  max-height: 247px;
  max-width: 247px;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  animation: fadeIn 2.5s forwards;
}

.div5 img {
  margin-top: 16px;
}
.div6 {
  grid-area: 1 / 4 / 8 / 5;
  background-color: var(--purple100);
  max-width: 256px;
  height: 100%;
  padding: 50px 32px;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  animation: fadeIn 3s forwards;
}

.div6 img {
  width: 357px;
  height: 318px;
  max-width: none;
  max-height: none;
  margin-top: 24px;
}

.div6 p {
  margin-top: 24px;
}

.div7 {
  grid-area: 8 / 2 / 11 / 3;
  background-color: var(--white);
  max-width: 256px;
  height: 100%;
  padding: 24px;
  border-radius: 10px;
  opacity: 0;
  animation: fadeIn 3.5s forwards;
}

.div7 span:first-child {
  display: block;
  margin-bottom: 15px;
}
.div7 img {
  width: 150px;
  height: auto;
  margin-top: 38px;
}

.div8 {
  grid-area: 8 / 3 / 11 / 5;
  background-color: var(--purple500);
  max-width: 544px;
  height: 100%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 24px;
  opacity: 0;
  animation: fadeIn 4s forwards;
}

.div8 img {
  height: 200px;
  width: 227px;
}

.div8 h2 {
  font-weight: 500;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@media only screen and (max-width: 1000px) {
  .parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .wrapper {
    width: 90%;
    margin: 0 auto;
  }

  .div1 {
    grid-area: 6 / 1 / 7 / 2;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .div2 {
    grid-area: 6 / 2 / 7 / 3;
    max-width: 100%;
  }
  .div3 {
    grid-area: 1 / 1 / 2 / 3;
    max-width: 100%;
  }
  .div4 {
    grid-area: 2 / 1 / 3 / 2;
    max-width: 100%;
  }

  .div4 h3 {
    margin-top: 50px;
  }
  .div5 {
    grid-area: 2 / 2 / 3 / 3;
    max-width: 100%;
  }
  .div6 {
    grid-area: 3 / 1 / 4 / 3;

    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .div7 {
    grid-area: 5 / 1 / 6 / 3;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .div8 {
    grid-area: 4 / 1 / 5 / 3;
    max-width: 100%;
  }
}

@media only screen and (max-width: 550px) {
  .parent {
    display: grid;
    grid-template-columns: 1fr;

    row-gap: 32px;
    height: auto;
  }

  .div1 {
    grid-area: 7 / 1 / 8 / 2;
  }
  .div2 {
    grid-area: 8 / 1 / 9 / 2;
  }
  .div3 {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: auto;
  }
  .div4 {
    grid-area: 2 / 1 / 3 / 2;
    height: auto;
  }
  .div5 {
    grid-area: 3 / 1 / 4 / 2;
  }
  .div6 {
    grid-area: 4 / 1 / 5 / 2;
  }
  .div7 {
    grid-area: 6 / 1 / 7 / 2;
  }
  .div8 {
    grid-area: 5 / 1 / 6 / 2;
  }
}