@use "lib/viewport";

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

    .--custom-group {
      max-width: unset;
      margin-top: 3em;

      h3 {
        a {
          color: var(--primary);

          &:hover {
            color: var(--tertiary);
          }
        }

        &::first-letter {
          text-transform: capitalize;
        }
      }

      p {
        margin-top: 0;
        color: var(--primary-high);
      }

      &.--has-description {
        h3 {
          margin-bottom: 0;
        }
      }
    }
  }

  &__header {
    max-width: 1100px;
  }

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

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

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

    @include viewport.until(md) {
      flex-direction: column;
    }

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

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

    @include viewport.until(md) {
      margin-bottom: 1em;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  &__banner {
    margin-bottom: 1em;
    width: 100%;
    height: auto; // Let the height scale with the width
    position: relative; // Ensure the container can handle absolute positioning for the image
    padding-top: 27.27%; // Maintain the aspect ratio (300px/1100px * 100)

    &-img {
      position: absolute; // Allow to fill the full space
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; // Ensures the image fills the container while preserving aspect ratio
    }
  }

  &__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%;
  }
}
