/*------------------------------------------------------------
TITLES
====================================*/

// Titles
.h1 {
  @extend %h1;
}
.h2 {
  @extend %h2;
  font-family: $font-family-serif;
  font-weight: $font-weight-bold;
}
.h3 {
  @extend %h3;
  text-transform: uppercase;
  font-family: $font-family-serif;
  font-weight: $font-weight-medium;
  color: $primary;
}
.h4 {
  @extend %h4;
  font-weight: $font-weight-sbold;
}
.h5 {
  @extend %h5;
}
.h6 {
  @extend %h6;
  font-weight: $font-weight-sbold;
}

.display-1,
.display-2,
.display-3,
.display-4 {
  font-family: $display-font-family;
}
.display-1 {
  @extend %display-1;
}
.display-2{
  @extend %display-2;
}
.display-3{
  @extend %display-3;
}
.display-4 {
  @extend %display-4;
}

// Titre header
.title-header-wrapper {
  display: flex;
  margin-bottom: 2.5rem;
  color: $title-header-text;
  align-items: flex-start;

  .icon-pattern-wrapper {
    margin-right: 2.5rem;
  }

  .header-title {
    font-size: $title-header-size;
    line-height: normal;
  }
  .header-subtitle {
    margin-bottom: 0;
  }
}

/* RESPONSIVE */
/***************************************/
@include media-breakpoint-up(md) {
  .title-header-wrapper {
    margin-bottom: 4rem;
  }
}
