_sass/3-modules/_hero.scss
.hero {
  padding: 80px 0;
  margin-bottom: 80px;
  background: #f5f5f5;

  .last-item {
    display: flex;
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 0 40px 0 0;
    
    .hero__title {
      font-size: 38px;
      font-weight: normal;
    }

    .hero__subtitle {
      font-size: 18px;
      line-height: 32px;
      letter-spacing: 0.5px;
    }

    .hero__social {
      display: flex;
    }

    .hero__social-title {
      font-weight: 700;
    }

  }

  .hero__image {
    img {
      box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    }
  }

  @media only screen and (max-width: $desktop) {
    .hero__content {
      padding: 0;

      .hero__subtitle {
        font-size: 16px;
        line-height: 28px;
      }
    }
  }

  @media only screen and (max-width: $tablet) {
    margin-bottom: 40px;

    .last-item {
      order: 1;
    }

    .hero__content {
      .hero__title {
        margin-bottom: 20px;
        font-size: 27px;
      }
    }

    .hero__image {
      margin-bottom: 20px;
      
      img {
        box-shadow: none;
      }
    }
  }

  @media only screen and (max-width: $mobile) {
    padding: 40px 0;
  }
}