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

.FoundingMembersFormPage {
  padding-bottom: 350px;
  background-color: $c_catskill-white;

  &__header {
    padding: 24px 0 84px 0;
    background-color: $c_black;

    &__title-wrapper {
      @extend %container;

      margin-top: 40px;
      margin-bottom: 40px;
    }

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

    &__title-date {
      display: none;
    }
  }

  &__back {
    @extend %container;

    &__arrow {
      color: $c_blue-ribbon;
      transform: rotate(90deg) scale(.79);
    }

    &__text {
      display: flex;
      align-items: center;
      font-family: $font-secondary;
      font-size: 18px;
      font-weight: 600;
      line-height: 22px;
      letter-spacing: -.4000000059604645px;
      color: $c_white;
      text-align: right;

      span {
        margin-left: 17px;
      }
    }
  }

  &__body {
    @extend %container;

    display: flex;
  }

  &__counter {
    width: 500px;
    height: 310px;
    min-width: 500px;
    min-height: 310px;
    margin-top: -80px;
    margin-left: 30px;
    background-color: $c_blue-ribbon;

    &__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 64px;
      padding: 18px;
      background-color: $c_han-purple;

      &__title {
        font-family: $font-primary;
        font-size: 20px;
        line-height: 28px;
        letter-spacing: 0;
        color: $c_white;
      }

      &__subtitle {
        font-family: $font-secondary;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: -.4000000059604645px;
        color: #dfe4ea;

        span {
          margin-left: 8px;
          font-family: $font-primary;
          font-size: 20px;
          line-height: 28px;
          letter-spacing: 0;
          color: $c_white;
        }
      }
    }

    &__body {
      margin: auto;
      background: none;
    }
  }

  @media #{$screen-max-md} {
    &__header {
      padding: 24px 20px 84px;

      &__title-wrapper {
        display: flex;
        align-items: center;
        margin: 20px 0;
        padding: 0;
      }

      &__title {
        display: inline-block;
        font-family: $font-primary;
        font-size: 24px;
        line-height: 32px;
      }

      &__title-date {
        display: block;
        margin-top: -2px;
        margin-left: 8px;
        padding: 4px;
        font-family: $font-secondary;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: -.4000000059604645px;
        color: white;
        background-color: $c_ebony-clay;
      }
    }

    &__back {
      &__text {
        span {
          display: none;
        }
      }
    }

    &__body {
      padding: 0 20px;
    }

    &__counter {
      display: none;
    }
  }

  @media (max-width: 450px) {
    &__header {
      &__title-wrapper {
        align-items: flex-start;
        flex-direction: column;
      }

      &__title-date {
        margin: 10px 0 0 0;
      }
    }
  }
}

.flex-row {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.margin-bottom-XS {
  margin-bottom: 8px;
}

.margin-bottom-S {
  margin-bottom: 12px;
}

.margin-bottom-M {
  margin-bottom: 24px;
}

.margin-bottom-L {
  margin-bottom: 32px;
}
