body {
  font-family: font('primary'), 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  color: color('font-default');
  font-weight: 400;
  line-height: 1.5;
  font-size: 1.6rem;
  word-spacing: 1px;
}

.title {
  display: block;

  &-1 {
    text-transform: uppercase;
    font-size: size('hg');
    letter-spacing: size('xs');
  }

  &-2 {
    text-transform: uppercase;
    font-size: size('lg');
    letter-spacing: size('xt');
  }

  &-3 {
    text-transform: uppercase;
    font-size: size('md');
    letter-spacing: size('xt');
  }

  &-4 {
    text-transform: uppercase;
    font-size: size('sm');
    letter-spacing: size('xt') / 2;
  }

  &--primary {
    color: transparent;
    background-image: linear-gradient(to right, color('primary-light'), color('primary-dark'));
    background-clip: text;
  }

  &--secondary {
    color: transparent;
    background-image: linear-gradient(to right, color('secondary-light'), color('secondary-dark'));
    background-clip: text;
  }

  &--tertiary {
    color: transparent;
    background-image: linear-gradient(to right, color('tertiary-light'), color('tertiary-dark'));
    background-clip: text;
  }

  &-s1 {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-column-gap: 1.5rem;
    align-items: center;

    &::before,
    &::after {
      content: '';
      height: 1px;
      display: block;
      background-color: color('grey-light-2');
    }
  }
}

// &:hover {
//   transform: scale(1.1);
//   text-shadow: 0.5rem 1rem 2rem transparentize(color('black'), 0.8);
// }