.cta {
  margin-block: 6rem;

  .cta__content {
    background-image: linear-gradient(315deg, #312950, #1A1625);
    color: white;
    padding: 2rem 3rem;
    border-radius: 40px;
    text-align: center;
    display: grid;
    gap: 2rem;

    button {
      background-color: var(--brand);
      color: white;
      padding: 24px 30px;
    }

    .cta__description {
      color: #F4F1FF99;
      font-size: 14px;
    }

    .cta__title {
      color: white;
    }
  }

  @media screen and (min-width: 1024px) {
    &.cta {
      display: flex;
      justify-content: center;
      justify-items: center;
      margin-inline: auto;

      .cta__content {
        max-width: 1200px;
        text-align: left;
        padding: 4rem 6rem;
        display: grid;
        gap: 2rem 4rem;

        a {
          grid-column: 2;
          grid-row: 1 / span 2;
          align-items: center;
          display: flex;
          text-decoration: none;

          button {
            width: 100%;
          }
        }

        .cta__description {
          font-size: 20px;
        }
      }
    }
  }
}