@use "../../assets/stylesheets/abstracts/functions" as *;
@use "../../assets/stylesheets/base/colors" as *;
@use "../../assets/stylesheets/abstracts/variables" as *;
@use "../../assets/stylesheets/abstracts/mixins" as *;

.about-us {
  margin-top: -80px;
  > div {
    &:first-child {
      grid-column: 1/7;
    }

    &:last-child {
      grid-column: 7/13;
      display: flex;
      flex-direction: column;
      justify-content: center;

      @include for-mobile {
        grid-column: 1/7;
      }

      .text {
        margin-top: 16px;
        color: $color-text-secondary;
      }

      .stats {
        display: flex;
        justify-content: space-between;
        margin-top: 64px;
        width: 100%;
        .swiper-slide {
          width: 33%;
        }

        @include for-mobile {
          display: none;
        }
      }

      .swiper {
        display: none;
        margin-left: -20px;
        margin-right: -20px;

        @include for-mobile {
          display: flex;
        }
      }

      @include for-mobile {
        h5,
        .text {
          text-align: center;
        }
      }
    }
  }
}
