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

.FoundingMembersPage {
  &__list-wrapper {
    background-color: #f2f5f9;
  }

  &__list {
    @extend %container;

    padding: 0 10px 0 10px;

    &__title {
      font-family: $font-primary;
      font-size: 40px;
      line-height: 48px;
      letter-spacing: 0;

      span {
        margin-left: 12px;
        color: #81858d;
      }
    }
  }

  &__cards {
    display: grid;
    width: 100%;
    margin-top: 40px;
    overflow: hidden;
    gap: 15px;
    grid-template-columns: repeat(4, 288px);
  }

  &__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    background-color: white;

    &__main {
      display: flex;

      &__icon {
        width: 64px;
        height: 64px;
        background-color: #dfe4ea;
        border-radius: 50%;

        &--loading {
          animation: 1s cubic-bezier(.4, 0, .6, 1) 0s infinite normal none running loading-fm-icon;
        }
      }

      &__content {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 12px;
      }

      &__name {
        font-family: $font-primary;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 0;
      }

      &__handle {
        font-family: $font-secondary;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -.4000000059604645px;
      }
    }

    &__scores {
      display: flex;
      justify-content: space-between;
      margin: 11px 0 0 0;
    }

    &__score {
      &__title {
        font-family: $font-secondary;
        font-size: 10px;
        line-height: 14px;
        letter-spacing: -.4000000059604645px;
      }

      &__stat {
        font-family: $font-primary;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 0;
        color: #4038ff;
      }
    }
  }

  @media (max-width: 1300px) {
    &__list {
      &__title {
        padding: 0 40px 0 40px;
      }
    }

    &__cards {
      justify-content: unset;
      padding: 0 40px 0 40px;
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 900px) {
    &__cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media #{$screen-max-sm} {
    &__list {
      &__title {
        font-size: 32px;
        line-height: 40px;
      }
    }
  }

  @media (max-width: 650px) {
    &__cards {
      grid-template-columns: 1fr;
    }
  }
}

@keyframes loading-fm-icon {
  0% {
    background-color: rgba(223, 228, 234, 1);
  }

  50% {
    background-color: rgba(223, 228, 234, .5);
  }

  100% {
    background-color: rgba(223, 228, 234, 1);
  }
}
