.hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: #f7fdfd;

  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "intro logo" "users users";

    padding: 3rem 0;
    padding-bottom: 104px;

    @media (max-width: $desktop) {
      padding-top: 2.5rem !important;
      padding-bottom: 2.5rem !important;
    }

    @media (max-width: $tablet) {
      grid-template-columns: 1fr;
      grid-template-areas: "intro" "logo" "users";
    }

    @media (max-width: $mobile) {
      padding-top: 2rem !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
  }

  &--inner .container  {
    padding-bottom: 56px;
  }

  &__label {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 54px;
    padding: 6px 16px;
    font-size: 14px;
    line-height: 1.375;
    color: #58595e;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 102, 102, 0.12);
    border-radius: 6px;

    & > span {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    span:not(:last-child) {
      padding-right: 3px;
    }

    img {
      margin-right: 3px;
    }

    @media (max-width: $desktop) {
      margin-top: 32px;
      font-size: 13px;
    }

    @media (max-width: $tablet) {
      margin-top: 22px;
      font-size: 12px;
    }

    @media (max-width: $mobile) {
      justify-content: center;
      max-width: 270px;
      margin-top: 0;

      img {
        max-width: 20px;
      }
    }
  }

  &__intro {
    grid-area: intro;
    padding-right: 4rem;

    .hero--inner & {
      padding-top: 96px;
      padding-right: 0;

      @media (max-width: $tablet) {
        padding-top: 0;
      }
    }

    .title {
      margin-top: 22px;
      margin-bottom: 0;
    }

    p {
      margin-top: 1rem;
      color: #2B383B;

      .hero--inner & {
        max-width: 500px;
      }
    }

    @media (max-width: $desktop) {
      padding-right: 0;

      .title {
        margin-top: 1.5rem;
      }
    }

    @media (max-width: $tablet) {
      text-align: center;

      .title, p {
        margin-left: auto;
        margin-right: auto;
      }

      .title {
        max-width: 590px;

        .hero--inner & {
          max-width: 500px;
        }
      }

      p {
        max-width: 470px;
      }
    }

    @media (max-width: $mobile) {
      .title {
        margin-top: 20px;

        .hero--inner & {
          max-width: 400px;
        }
      }

      p {
        .hero--inner & {
          max-width: 360px;
        }
      }
    }
  }

  &__links {
    display: flex;
    align-items: center;
    column-gap: 1.25rem;
    margin-top: 1.75rem;

    @media (max-width: $desktop) {
      margin-top: 2.25rem;
    }

    @media (max-width: $tablet) {
      justify-content: center;
      margin-top: 1rem;
    }
  }

  &__logo {
    grid-area: logo;
    margin-top: 14px;
    margin-left: 20px;

    img {
      display: block;
      max-width: 100%;
      height: auto;

      .hero--inner & {
        margin-left: auto;
        margin-right: 45px;
        margin-top: 8px;
      }

      @media (max-width: $desktop) {
        max-width: 460px;

        .hero--inner & {
          margin-right: auto;
        }
      }

      @media (max-width: $tablet) {
        max-width: 368px;
        margin: 2rem auto !important;
      }

      @media (max-width: $mobile) {
        max-width: 100%;
        margin: 1.5rem auto 0 auto !important;
      }
    }

    @media (max-width: $desktop) {
      margin: -5px 0 0 12px;
    }

    @media (max-width: $tablet) {
      margin: 0;
    }
  }

  &__users {
    grid-area: users;
    margin-top: -21px;

    @media (max-width: $desktop) {
      margin-top: 40px;
    }

    @media (max-width: $tablet) {
      margin-top: 2rem;
      text-align: center;
    }
  }

  &__users-title {
    margin: 0;
    letter-spacing: 0.05em;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
  }

  &__users-list {
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    column-gap: 31px;

    img {
      max-width: 100%;
      height: auto;

      @media (max-width: $desktop) {
        height: 36px;
      }

      @media (max-width: $mobile) {
        height: 32px;
      }
    }

    @media (max-width: $desktop) {
      margin: 1rem 0;
      column-gap: 24px;
    }

    @media (max-width: $tablet) {
      justify-content: center;
      margin: 0.5rem 0;
    }

    @media (max-width: $mobile) {
      margin: 1rem 0 0.25rem 0;
      justify-content: center;
      flex-wrap: wrap;
      row-gap: 12px;
      column-gap: 15px;
    }
  }
}
