:root {
  /* Colors */
  --purple-100: #dbd1fc;
  --purple-500: #7551dc;
  --yellow-100: #f9eee2;
  --yellow-500: #ffcc6a;
  --white: #ffffff;
  --black: #121212;

  /* Spacing */
  --spacing-500: 2.5rem;
  --spacing-400: 2rem;
  --spacing-300: 1.5rem;
  --spacing-200: 1rem;
  --spacing-100: 0.5rem;
}
.dm-sans-medium {
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 500;
}
.dm-sans-regular {
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
}

.text-preset-1 {
  font-size: 3.875rem;
  line-height: 93.5%;
  letter-spacing: -1px;
}
.text-preset-2 {
  font-size: 2.5rem;
  line-height: 90%;
  letter-spacing: -2px;
}
.text-preset-3 {
  font-size: 2rem;
  line-height: 87.5%;
  letter-spacing: -1px;
}
.text-preset-4 {
  font-size: 1.125rem;
  line-height: 111%;
  letter-spacing: 0;
}

body {
  width: 100vw;
  min-height: 100vh;
  padding-block: 5em;
  align-content: center;
  background-color: #f6f5f6;
  overflow-x: hidden;
  main {
    max-width: 70rem;
    display: grid;
    justify-self: center;
    grid-template-columns: repeat(12, 4rem);
    grid-template-rows: 324px 59px 156px 246px;
    gap: var(--spacing-400);
    & > * {
      border-radius: 0.625em;
      padding: var(--spacing-300);
    }
    header,
    .create-content,
    .social-media {
      padding: var(--spacing-400);
    }
    header {
      grid-column: 4 / 10;
      grid-row: 1 / 2;
      background-color: var(--purple-500);
      color: var(--white);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      h1 {
        text-align: center;
        font-size: 3.875em;
        margin-block-end: var(--spacing-300);
        span {
          color: var(--yellow-500);
        }
      }
      img {
        max-width: 192px;
        margin-block-end: var(--spacing-100);
      }
    }
    .manage-platforms {
      grid-column: 4 / 7;
      grid-row: 2 / 4;
      background-color: var(--white);
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .illustration {
        width: 19.75em;
        height: 4em;
        display: flex;
        gap: 10px;
        div {
          width: 100%;
          height: 100%;
          border-radius: 34px;
          box-shadow: -9.781px 11.738px 24.454px 0px rgba(98, 26, 123, 0.05);
          cursor: pointer;
          background-repeat: no-repeat;
          background-size: 2.65em, 4.25em 2.125em;
          background-position: left 0.75em center, right 1.5em center;
        }
        .inst{
          background-image: url(../assets/images/inst-icon.png), url(../assets/images/inst-link.png);
        }
        .x{
          background-image: url(../assets/images/x-icon.png), url(../assets/images/x-link.png);
        }
      }
    }
    .maintain-schedule {
      grid-column: 7 / 10;
      grid-row: 2 / 4;
      background-color: var(--yellow-500);
      background-image: url(../assets/images/illustration-consistent-schedule.webp);
      background-repeat: no-repeat;
      background-size: 13em 9.8em;
      background-position: center bottom -90%;
    }
    .social-media {
      grid-column: 10 / -1;
      grid-row: 1 / -2;
      background-color: var(--purple-100);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--spacing-300);
      .img{
        width: 22.3em;
        height: 19.9em;
      }
    }
    .non-stop-content {
      grid-column: 7 / -1;
      grid-row: -2 / -1;
      background-color: var(--purple-500);
      background-image: url(../assets/images/illustration-grow-followers.webp);
      background-repeat: no-repeat;
      background-size: 14.25em 12.5em;
      background-position: left 1.5em center;
      display: flex;
      align-items: center;
      h2{
        display: inline-block;
        width: 6.43em;
        color: var(--white);
        margin-inline-start: auto;
      }
    }
    .audience-growth {
      grid-column: 4 / 7;
      grid-row: -2 / -1;
      background-color: var(--white);
      background-image: url(../assets/images/illustration-audience-growth.webp);
      background-repeat: no-repeat;
      background-size: 11em auto;
      background-position: center bottom 1.5em;
      h2{
        span{
          display: block;
          margin-block-end: 0.93rem;
        }
      }
    }
    .create-content {
      grid-column: 1 / 4;
      grid-row: 1 / 3;
      background-color: var(--yellow-100);
      background-image: url(../assets/images/illustration-create-post.webp);
      background-repeat: no-repeat;
      background-size: 11.9em auto;
      background-position: center bottom 6.76em;
      span{
        color: var(--purple-500);
        font-style: italic;
      }
    }
    .write-content {
      grid-column: 1 / 4;
      grid-row: 3 / -1;
      background-color: var(--yellow-500);
      background-image: url(../assets/images/illustration-ai-content.webp);
      background-repeat: no-repeat;
      background-size: 13.75em auto;
      background-position: center bottom 1.5em;
    }
  }
}