@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
  -moz-transform: rotate($degrees);
  -ms-transform: rotate($degrees);
  -o-transform: rotate($degrees);
  transform: rotate($degrees);
}

%body-text-small {
  font-family: $font-tgn;
  font-size: $font-size-small;
  color: $text;
  line-height: 1.222rem;
  letter-spacing: 0.02rem;
}

%body-text {
  font-family: $font-tgn;
  font-size: $font-size-body-text;
  color: $text;
  line-height: 1.333rem;
  letter-spacing: 0.022rem;

  @include until($tablet) {
    line-height: 1.444rem;
  }
}

h1 {
  font-family: $font-tgn-condensed;
  font-weight: bold;
  font-size: 4.444rem;
  color: $white;
  line-height: 4.778rem;
  text-transform: uppercase;
  margin-bottom: 0.75rem;

  @include until($tablet) {
    font-size: 3.111rem;
    line-height: 3.444rem;
  }
}

h2 {
  font-family: $font-tgn-condensed;
  font-weight: bold;
  font-size: 3.333rem;
  color: $white;
  line-height: 3.667rem;
  text-transform: uppercase;
  margin-bottom: 0.666rem;

  @include until($tablet) {
    font-size: 2.667rem;
    line-height: 3rem;
  }
}

h3 {
  font-family: $font-tgn-condensed;
  font-weight: bold;
  font-size: 2.556rem;
  color: $white;
  line-height: 2.889rem;
  margin-bottom: 0.75rem;

  @include until($tablet) {
    font-size: 2rem;
    line-height: 2.333rem;
  }
}

h4 {
  font-family: $font-tgn-condensed;
  font-size: 1.333rem;
  color: $text;
  line-height: 1.667rem;

  @include until($tablet) {
    font-size: 1.111rem;
    line-height: 1.444rem;
  }
}

p {
  font-family: $font-tgn;
  font-size: 1rem;
  line-height: 1.444rem;
  margin-bottom: 1.389rem;

  strong {
    font-weight: bold;
  }

  @include until($tablet) {
    font-size: 0.8889rem;
    line-height: 1.222rem;
  }

  &.is-small {
    font-size: 0.7778rem;
    line-height: 1.222rem;

    @include until($tablet) {
      font-size: 0.7778rem;
      line-height: 1.222rem;
    }
  }
}

.column.is-11-of-24 {
  @include from($desktop) {
    width: (3 / 12) * 100%;
  }

  @include from($fullhd) {
    width: (11 / 24) * 100%;
  }
}

.column.is-13-of-24 {
  @include from($desktop) {
    width: (9 / 12) * 100%;
  }

  @include from($fullhd) {
    width: (11 / 24) * 100%;
  }
}

.is-offset-1-of-24 {
  margin-left: (1 / 24) * 100%;
  @include until($desktop) {
    margin-left: 0;
  }
}