.about {
  &__main-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    max-width: 1100px;
  }

  &__header {
    max-width: 1100px;
  }

  &__left-side {
    flex: 1 1 650px;
  }
  &__right-side {
    flex: 1 2 200px;
  }

  &__stats {
    display: flex;
    border-top: 1px solid var(--primary-low);
    border-bottom: 1px solid var(--primary-low);
    padding: 1em 1em;
    margin-bottom: 1em;

    @include breakpoint(tablet) {
      flex-direction: column;
    }

    .d-icon {
      margin-right: 3px;
    }
  }

  &__stats-item {
    flex: 1 0 fit-content;

    @include breakpoint(tablet) {
      margin-bottom: 1em;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  &__banner {
    margin-bottom: 1em;
    max-height: 300px;
    max-width: 100%;
    object-fit: contain;
  }

  &__activities-item {
    display: flex;
    align-items: center;
    margin-bottom: 1.5em;
  }

  &__activities-item-icon {
    margin-right: 1em;
  }

  &__activities-item-period {
    font-size: var(--font-down-2);
  }

  &__admins,
  &__moderators {
    margin-top: 3em;

    h3 {
      margin-bottom: 1em;
    }
  }
}

.about-page-users-list {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));

  &__expand-button {
    width: 100%;
  }
}

section.about {
  margin-bottom: 3em;

  .users {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
  }

  h3 {
    margin-bottom: 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.35em;
    .d-icon {
      color: var(--primary-high);
    }
    .badge-category__wrapper {
      font-size: var(--font-0);
      align-self: baseline;
    }
  }

  &.stats {
    table {
      td {
        padding: 0.67em;
        &:not(:first-child) {
          text-align: center;
        }
      }
    }

    .stats-table-footer {
      max-width: 30em;
    }
  }
}