$tablet: 768px;
$desktop: 1230px;

@import '@/bulma/utilities/_all.sass';
@import '@/styles/variables';
@import '@/styles/font-styles';

.mainTitle {
  position: relative;

  .small {
    @extend .body-bold;

    position: absolute;
    top: 38px;
    padding-right: 24px;
    color: $gray-001;
    text-transform: uppercase;
    display: block;

    @include tablet-only {
      position: static;
      padding-right: 0;
      top: auto;
      left: auto;
    }

    @include mobile {
      position: static;
      padding-right: 0;
      top: auto;
      left: auto;
      margin-bottom: 5px;
      text-transform: lowercase;
    }
  }

  .title {
    @extend .h1;
    letter-spacing: -2px;

    &.title-coldturkey {
      color: $gray-002;
    }

    &.title-tundora {
      color: $gray-004;
    }
  }

  .subtitle {
    @extend .navigation;

    display: block;
    color: $gray-001;
    margin-top: 35px;
    text-transform: uppercase;

    @include mobile {
      margin-top: 15px;
    }
  }
}