@import '../../styles/main.scss';

.TokensPage {
  &__cta-wrapper {
    background-color: $c_blue-ribbon;
  }

  &__cta {
    @extend %container;

    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 120px 0;
    background-image:
      url('../../assets/background/token-footer-cta-left.svg'),
      url('../../assets/background/token-footer-cta-right.svg');
    background-position: left center, right bottom;
    background-repeat: no-repeat;

    &__link {
      width: 264px;
      height: 80px;
      margin-top: 32px;
    }

    &__title {
      max-width: 815px;
      font-family: $font-primary;
      font-size: 60px;
      line-height: 68px;
      letter-spacing: 0;
      color: $c_white;
      text-align: center;
    }
  }

  @media #{$screen-max-md} {
    &__cta {
      padding: 120px 20px;
    }
  }

  @media #{$screen-max-sm} {
    &__cta {
      padding: 180px 0;
      background-image:
        url('../../assets/background/token-footer-cta-top-mobile.svg'),
        url('../../assets/background/token-footer-cta-bottom-mobile.svg');
      background-position: center 5%, center 95%;
      background-repeat: no-repeat;

      &__title {
        width: 80%;
        font-size: 40px;
        line-height: 48px;
        text-align: left;
      }

      &__link {
        width: 335px;
        height: 60px;
      }
    }

    @media (max-width: 400px) {
      &__cta__title {
        width: 335px;
      }
    }
  }
}
