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

.FoundingMembersPage {
  &__hero-wrapper {
    position: relative;
    padding-bottom: 185px;
    background-color: black;
  }

  &__hero {
    @extend %largeContainer;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    &__content {
      display: flex;
      flex-direction: column;
      width: 606px;
      margin-right: auto;
    }

    &__title {
      margin-bottom: 20px;
      font-family: $font-primary;
      font-size: 60px;
      line-height: 68px;
      letter-spacing: 0;
      color: white;
    }

    &__paragraph {
      margin-bottom: 32px;
      font-family: $font-secondary;
      font-size: 20px;
      line-height: 28px;
      letter-spacing: 0;
      color: #a7aeb7;
    }

    &__button {
      width: 250px;
      height: 80px;
    }

    &__image-wrapper {
      margin-left: 20px;
    }

    &__image {
      width: 704px;
      height: 579px;

      &--secondary {
        display: none;
        width: 335px;
        height: 280px;
      }
    }
  }

  &__list-wrapper {
    &--current {
      padding: 490px 0 120px 0;
    }

    &--new {
      padding: 240px 0 80px 0;
    }
  }

  &__cta-wrapper {
    padding: 75px 3%;
    background-color: #4038ff;
  }

  &__cta {
    @extend %container;

    display: grid;
    grid-template-columns: 1fr 1fr;

    &__title {
      font-family: $font-primary;
      font-size: 48px;
      line-height: 56px;
      letter-spacing: 0;
      color: white;
    }

    &__text {
      margin-top: 16px;
      font-family: $font-secondary;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0;
      color: white;
    }

    &__button {
      width: 240px;
      height: 60px;
      margin-top: 24px;
      background-color: black;
    }

    &__button:hover {
      background-color: black;
    }

    &__visual {
      margin: 0 auto;
    }
  }

  &__disclaimer {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 40px 0;
    background: #322af1;

    &__title {
      font-family: $font-primary;
      font-size: 24px;
      line-height: 32px;
      letter-spacing: 0;
      color: white;
      text-align: center;
    }

    &__text {
      width: 980px;
      margin-top: 8px;
      font-family: $font-secondary;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: -.4000000059604645px;
      color: white;
      text-align: center;
    }
  }

  @media #{$screen-max-lg} {
    &__hero-wrapper {
      padding-top: 48px;
      padding-bottom: 220px;
    }
  }

  @media #{$screen-max-md} {
    &__hero {
      flex-direction: column;

      &__content {
        margin-right: 0;
      }

      &__image-wrapper {
        margin-top: 60px;
        margin-left: 0;
      }
    }

    &__list-wrapper {
      &--current {
        padding: 850px 0 70px 0;
      }

      &--new {
        padding: 330px 0 80px 0;
      }
    }

    &__cta {
      grid-template-columns: initial;
      grid-template-rows: 1fr 1fr;

      &__button {
        width: 335px;
        margin: 32px auto 32px auto;
      }

      &__visual {
        margin: auto;
      }

      &__title > br {
        display: none;
      }
    }

    &__hero-button {
      width: 335px;
      height: 60px;
    }

    &__hero-wrapper {
      padding-bottom: 180px;
    }

    &__disclaimer {
      padding: 40px 20px;

      &__text {
        width: 100%;
      }
    }
  }

  @media #{$screen-max-sm} {
    &__hero {
      &__content {
        width: 335px;
      }

      &__title {
        font-size: 32px;
        line-height: 40px;
      }

      &__paragraph {
        font-size: 16px;
        line-height: 24px;
      }

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

      &__image-wrapper {
        margin: 28px 0 20px 0;
      }

      &__image {
        display: none;

        &--secondary {
          display: block;
        }
      }
    }

    &__cta-wrapper {
      padding: 75px 0 35px 0;
    }

    &__cta {
      justify-content: center;
      padding: 0 20px;
      grid-template-rows: 1fr 1fr;

      &__title {
        font-size: 32px;
        line-height: 40px;
      }

      &__visual {
        width: 310px;
        height: 217px;
      }
    }
  }

  @media (max-width: 510px) {
    &__list-wrapper--current {
      padding-top: 1050px;
    }
  }
}

.ArrowButton {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;

  &__text {
    position: absolute;
    left: 20px;
  }

  &__arrow {
    position: absolute;
    right: 0;
    transform: rotate(-90deg);
  }
}
