.home {
  display: flex;
  flex-direction: column;
  flex: 1;

  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 6rem;
    padding-bottom: 6rem;
    gap: 1rem;

    h1,
    h6 {
      text-align: center;
      max-width: 50rem;
    }

    h6 {
      color: var(--gray-11);
      font-weight: var(--font-weight-regular);
      margin-bottom: 1rem;
    }
  }

  .benefits {
    display: flex;
    flex-direction: row;
    padding-top: 6rem;
    padding-bottom: 6rem;
    gap: 2rem;

    .item {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      background-color: var(--blue-2);
      padding: 1.5rem 2rem;
      border-radius: 1rem;

      h3 {
        color: var(--gray-12);
      }

      p {
        color: var(--gray-12);
      }
    }
  }

  .features {
    display: flex;
    flex-direction: column;
    padding-top: 6rem;
    padding-bottom: 6rem;
    gap: 5rem;

    h2 {
      text-align: center;
    }

    .list {
      display: flex;
      flex-direction: column;
      gap: 5rem;

      .item {
        display: flex;
        flex-direction: row;
        gap: 5rem;

        aside {
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex: 1;
          gap: 1rem;

          p {
            color: var(--gray-11);
            font-size: 1.25rem;
          }
        }

        figure {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
          background-color: var(--blue-2);
          padding: 3rem 0;
          border-radius: 1rem;

          svg {
            width: 10rem;
            height: 10rem;
            fill: var(--blue-8);
          }
        }

        &:nth-child(2n) {
          flex-direction: row-reverse;
        }
      }
    }
  }
}
