/**
 * @file
 * Extra typography styles. These are based off of the standard Olivero heading
 * styles.
 */

.h1 {
  letter-spacing: -0.01em;
  font-size: 28px;
  line-height: var(--sp2);

  @media (width > 700px) {
    font-size: 60px;
    line-height: var(--sp4);
  }
}

.h2 {
  letter-spacing: -0.01em;
  font-size: 24px;
  line-height: var(--sp2);

  @media (width > 700px) {
    font-size: 36px;
    line-height: var(--sp3);
  }
}

.h3 {
  font-size: 20px;
  line-height: var(--sp1-5);

  @media (width > 700px) {
    font-size: 24px;
    line-height: var(--sp2);
  }
}

.h4 {
  font-size: 18px;
  line-height: var(--sp1-5);
}

.h5 {
  font-size: 16px;
  line-height: var(--sp1-5);
}

.h6 {
  font-size: 14px;
  line-height: var(--sp);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-block: var(--sp);
  color: var(--color-text-neutral-loud);
  font-family: var(--font-sans);
  font-weight: bold;

  @media (width > 700px) {
    margin-block: var(--sp2);
  }
}

.field--tags__label {
  text-transform: uppercase;
}