@import '../../../../../src/styles/common/colors';
@import '../../../../../src/styles/common/mixins';
@import '../../../../../src/styles/common/screen';

.hero {
  padding: 0;
  position: relative;
  top: -50px;
  z-index: 1;

  @media #{$media-small-minus} {
    margin-bottom: -50px;
  }
}

.skew {
  background-color: $primary-1;
  box-sizing: border-box;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
  min-height: 400px;
  padding: 6em 2em;

  h1 {
    color: $white;
    font-size: 52px;
    line-height: 1em;
    margin-bottom: 0;

    @media #{$media-small-minus} {
      font-size: 2em;
    }
  }

  h3 {
    color: $white;
    font-weight: normal;
    font-size: 16px;
    margin: 20px 0 30px;
  }

  @media #{$media-small-minus} {
    padding-top: 3em;
    min-height: 325px;
  }
}

.intro-block {
  box-sizing: border-box;
  float: left;
  padding-right: 15px;
  width: 33.3333%;

  &:last-child {
    padding-right: 0;
  }

  h4 {
    font-size: 14px;
    font-weight: 200;
  }

  span {
    color: $base-text;
  }

  @media #{$media-small-minus} {
    padding-right: 0;
    padding-bottom: 15px;
    width: 100%;
  }
}