[class*='title-'] {
  font-family: var(--font-family__title);
  letter-spacing: var(--font-letter-spacing-wide);
}

.title {

  &-xl,
  &-XL {

    @media (--viewport-xs-min) {
      font-size: var(--font-size-11);
      line-height: var(--font-line-height-8);
    }

    @media (--viewport-ms-min) {
      font-size: var(--font-size-12);
      line-height: var(--font-line-height-9);
    }

    @media (--viewport-sm-min) {
      font-size: var(--font-size-12);
      line-height: var(--font-line-height-9);
    }

    @media (--viewport-md-min) {
      font-size: var(--font-size-14);
      line-height: var(--font-line-height-11);
    }

    @media (--viewport-lg-min) {
      font-size: var(--font-size-14);
      line-height: var(--font-line-height-11);
    }

    /*Estlos heredados del viejo átomo (CA. R.)*/
    color: var(--color-text-quaternary);

    &_color {
      &_light {
        color: var(--color-text-light);
      }

      &_secondary {
        color: var(--color-text-secondary);
      }
    }


  }

  &-l,
  &-L {
    @media (--viewport-xs-min) {
      font-size: var(--font-size-9);
      line-height: var(--font-line-height-6);
    }

    @media (--viewport-ms-min) {
      font-size: var(--font-size-10);
      line-height: var(--font-line-height-7);
    }

    @media (--viewport-sm-min) {
      font-size: var(--font-size-10);
      line-height: var(--font-line-height-7);
    }

    @media (--viewport-md-min) {
      font-size: var(--font-size-11);
      line-height: var(--font-line-height-8);
    }

    @media (--viewport-lg-min) {
      font-size: var(--font-size-11);
      line-height: var(--font-line-height-8);
    }

    /*Estlos heredados del viejo átomo (CA. R.)*/
    color: var(--color-text-quaternary);

    &__extented {
      position: absolute;
      margin-left: 5px;
      font-size: 14px;
      margin-top: -8px;

      @media (--viewport-ms-min) {
        font-size: 16px;
        margin-top: -11px;
      }

      @media (--viewport-sm-min) {
        font-size: 14px;
        margin-top: -6px;
      }

      @media (--viewport-md-min) {
        font-size: 16px;
        margin-top: -11px;
      }

      @media (--viewport-lg-min) {
        font-size: 16px;
        margin-top: -11px;
      }
    }

    &__prefix {
      float: left;
      margin-right: 5px;

      font-size: 14px;
      margin-top: -5px;

      @media (--viewport-ms-min) {
        font-size: 16px;
        margin-top: -8px;
      }

      @media (--viewport-sm-min) {
        font-size: 14px;
        margin-top: -3px;
      }

      @media (--viewport-md-min) {
        font-size: 16px;
        margin-top: -8px;
      }

      @media (--viewport-lg-min) {
        font-size: 16px;
        margin-top: -7px;
      }
    }

    &_color {
      &_light {
        color: var(--color-text-light);
      }

      &_secondary {
        color: var(--color-text-secondary);
      }

      &_dark {
        color: var(--color-text);
      }

      &_accent-dark {
        color: var(--color-accent-dark);
      }

      &_accent {
        color: var(--color-accent);
      }
    }

  }

  &-m,
  &-M {
    @media (--viewport-xs-min) {
      font-size: var(--font-size-6);
      line-height: var(--font-line-height-3);
    }

    @media (--viewport-ms-min) {
      font-size: var(--font-size-7);
      line-height: var(--font-line-height-4);
    }

    @media (--viewport-sm-min) {
      font-size: var(--font-size-7);
      line-height: var(--font-line-height-4);
    }

    @media (--viewport-md-min) {
      font-size: var(--font-size-8);
      line-height: var(--font-line-height-5);
    }

    @media (--viewport-lg-min) {
      font-size: var(--font-size-8);
      line-height: var(--font-line-height-5);
    }

    /*Estlos heredados del viejo átomo (CA. R.)*/
    color: var(--color-secondary-brand);
    transition: all 0.3s;

    &_color {
      &_light {
        color: var(--color-text-light);
      }

      &_dark {
        color: var(--color-secondary)
      }

      &_accent-dark {
        color: var(--color-accent-dark)
      }

      &_accent {
        color: var(--color-text-error)
      }
    }

  }

  &-s,
  &-S {
    /*No responsive scaling*/
    font-family: var(--font-family__title-s);
    letter-spacing: var(--font-letter-spacing-wide);
    font-size: var(--font-size-5);
    line-height: var(--font-line-height-3);

    /*Estlos heredados del viejo átomo (CA. R.)*/
    color: var(--color-text-tertiary);
    transition: all 0.3s;

    &_color {
      &_light {
        color: var(--color-text-light);
      }
    }

  }

  &_color {
    &_light {
      color: var(--color-text-inverse);
    }

    &_dark {
      color: var(--color-text);
    }

    &_accent-dark {
      color: var(--color-text-accent);
    }

    &_accent {
      color: var(--color-text-error);
    }
  }
}