@import './variables.scss';
@import './mixins.scss';

.text {
  margin: 0;
}

.h1 {
  font-size: var(--heading1);
  font-weight: 700;
  line-height: calc(var(--heading1) + 8px);

  @include mediaMobile {
    font-size: var(--heading3);
    font-weight: 700;
    line-height: calc(var(--heading3) + 8px);
  }
}

.h2 {
  font-size: var(--heading2);
  font-weight: 700;
  line-height: calc(var(--heading2) + 6px);

  @include mediaMobile {
    font-size: var(--heading3);
    font-weight: 700;
    line-height: calc(var(--heading3) + 8px);
  }
}

.h3 {
  font-size: var(--heading3);
  font-weight: 700;
  line-height: calc(var(--heading3) + 8px);

  @include mediaMobile {
    font-size: var(--heading4);
    line-height: calc(var(--heading4) + 8px);
    font-weight: 600;
  }
}

.h4 {
  font-size: var(--heading4);
  line-height: calc(var(--heading4) + 8px);
  font-weight: 600;

  @include mediaMobile {
    font-size: var(--pSmall);
    font-weight: 500;
    line-height: calc(var(--pSmall) + 6px);
  }
}

.pLargeMedium {
  font-size: var(--pLarge);
  font-weight: 500;
  line-height: calc(var(--pLarge) + 6px);

  @include mediaMobile {
    font-size: var(--pMedium);
    font-weight: 500;
    line-height: calc(var(--pMedium) + 8px);
  }
}

.pLargeRegular {
  font-size: var(--pLarge);
  font-weight: 400;
  line-height: calc(var(--pLarge) + 6px);

  @include mediaMobile {
    font-size: var(--pMedium);
    font-weight: 400;
    line-height: calc(var(--pMedium) + 8px);
  }
}

.pMediumMedium {
  font-size: var(--pMedium);
  font-weight: 500;
  line-height: calc(var(--pMedium) + 8px);

  @include mediaMobile {
    font-size: var(--pSmall);
    font-weight: 500;
    line-height: calc(var(--pSmall) + 6px);
  }
}

.pMediumRegular {
  font-size: var(--pMedium);
  font-weight: 400;
  line-height: calc(var(--pMedium) + 8px);

  @include mediaMobile {
    font-size: var(--pSmall);
    font-weight: 400;
    line-height: calc(var(--pSmall) + 6px);
  }
}

.pSmallMedium {
  font-size: var(--pSmall);
  font-weight: 500;
  line-height: calc(var(--pSmall) + 6px);
}

.pSmallRegular {
  font-size: var(--pSmall);
  font-weight: 400;
  line-height: calc(var(--pSmall) + 6px);
}

.captionMedium {
  font-size: var(--caption);
  font-weight: 500;
  line-height: calc(var(--caption) + 4px);
}

.captionRegular {
  font-size: var(--caption);
  font-weight: 400;
  line-height: calc(var(--caption) + 4px);
}

.otherMedium {
  font-size: var(--other);
  font-weight: 500;
  line-height: calc(var(--other) + 4px);
}