$sm: "min-width: 750px";
$md: "min-width: 970px";
$lg: "min-width: 1170px";
$xl: "min-width: 1800px";

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-heading);
  font-weight: 700;

  strong {
    font-weight: 800;
  }
}

.p1,
.p2,
.p3,
.p4,
.p5,
.p6 {
  font-family: var(--font-body);
  line-height: 1.5;
  letter-spacing: 0;

  strong {
    font-weight: 500;
  }

  br {
    margin-bottom: 1em;
  }
}

p.p1,
p.p2,
p.p3,
p.p4,
p.p5,
p.p6 {
  margin-bottom: 0.5em;
  display: block;

  &:last-child {
    margin-bottom: 0;
  }
}

.h1 {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--letter-space-tight-4);

  @media (orientation: portrait) {
    font-size: var(--size-9);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-12);
  }

  @media (orientation: landscape) {
    font-size: var(--size-9);
  }

  @media (orientation: landscape) and ($md) {
    font-size: var(--size-14);
  }

  @media (orientation: landscape) and ($lg) {
    font-size: var(--size-16);
  }

  @media (orientation: landscape) and ($xl) {
    font-size: var(--size-20);
  }
}

.h2 {
  line-height: 1.1;
  letter-spacing: var(--letter-space-tight-3);

  @media (orientation: portrait) {
    font-size: var(--size-8);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-11);
  }

  @media (orientation: landscape) {
    font-size: var(--size-8);
  }

  @media (orientation: landscape) and ($md) {
    font-size: var(--size-13);
  }

  @media (orientation: landscape) and ($lg) {
    font-size: var(--size-15);
  }

  @media (orientation: landscape) and ($xl) {
    font-size: var(--size-16);
  }
}

.h3 {
  line-height: 1.1;
  letter-spacing: var(--letter-space-tight-3);
  word-spacing: var(--letter-space-large-1);

  @media (orientation: portrait) {
    font-size: var(--size-7);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-10);
  }

  @media (orientation: landscape) {
    font-size: var(--size-7);
  }

  @media (orientation: landscape) and ($md) {
    font-size: var(--size-12);
  }

  @media (orientation: landscape) and ($lg) {
    font-size: var(--size-13);
  }

  @media (orientation: landscape) and ($xl) {
    font-size: var(--size-14);
  }
}

.h4 {
  line-height: 1.1;
  letter-spacing: var(--letter-space-tight-3);
  word-spacing: var(--letter-space-large-1);

  @media (orientation: portrait) {
    font-size: var(--size-4);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-6);
  }

  @media (orientation: landscape) {
    font-size: var(--size-4);
  }

  @media (orientation: landscape) and ($md) {
    font-size: var(--size-6);
  }

  @media (orientation: landscape) and ($lg) {
    font-size: var(--size-8);
  }

  @media (orientation: landscape) and ($xl) {
    font-size: var(--size-9);
  }
}

.gridItemTitle {
  font-weight: 500;
  line-height: 1.3;

  @media (orientation: portrait) {
    font-size: var(--size-2);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-3);
  }

  @media (orientation: landscape) {
    font-size: var(--size-2);
  }

  @media (orientation: landscape) and ($md) {
    font-size: var(--size-2);
  }

  @media (orientation: landscape) and ($lg) {
    font-size: var(--size-3);
  }

  @media (orientation: landscape) and ($xl) {
    font-size: var(--size-4);
  }
}

.p1 {
  @media (orientation: portrait) {
    font-size: var(--size-0);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-1);
  }

  @media (orientation: landscape) {
    font-size: var(--size-0);
  }

  @media ($lg) {
    font-size: var(--size-0);
  }

  @media ($xl) {
    font-size: var(--size-1);
  }
}

.p2 {
  @media (orientation: portrait) {
    font-size: var(--size-1);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-2);
  }

  @media (orientation: landscape) {
    font-size: var(--size-1);
  }

  @media ($lg) {
    font-size: var(--size-1);
  }

  @media ($xl) {
    font-size: var(--size-2);
  }
}

.p3 {
  @media (orientation: portrait) {
    font-size: var(--size-2);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-3);
  }

  @media (orientation: landscape) {
    font-size: var(--size-2);
  }

  @media ($lg) {
    font-size: var(--size-2);
  }

  @media ($xl) {
    font-size: var(--size-3);
  }
}

.p4 {
  @media (orientation: portrait) {
    font-size: var(--size-3);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-4);
  }

  @media (orientation: landscape) {
    font-size: var(--size-3);
  }

  @media ($lg) {
    font-size: var(--size-3);
  }

  @media ($xl) {
    font-size: var(--size-4);
  }
}

.p5 {
  @media (orientation: portrait) {
    font-size: var(--size-4);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-5);
  }

  @media (orientation: landscape) {
    font-size: var(--size-4);
  }

  @media ($lg) {
    font-size: var(--size-4);
  }

  @media ($xl) {
    font-size: var(--size-5);
  }
}

.p6 {
  @media (orientation: portrait) {
    font-size: var(--size-5);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-6);
  }

  @media (orientation: landscape) {
    font-size: var(--size-5);
  }

  @media ($lg) {
    font-size: var(--size-5);
  }

  @media ($xl) {
    font-size: var(--size-6);
  }
}

.tag1,
.tag2 {
  font-family: var(--font-tags);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: var(--letter-space-tight-1);
}

.tag1 {
  @media (orientation: portrait) {
    font-size: var(--size-2);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-3);
  }

  @media (orientation: landscape) {
    font-size: var(--size-2);
  }

  @media ($lg) {
    font-size: var(--size-2);
  }

  @media ($xl) {
    font-size: var(--size-3);
  }
}

.tag2 {
  @media (orientation: portrait) {
    font-size: var(--size-3);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-4);
  }

  @media (orientation: landscape) {
    font-size: var(--size-2);
  }

  @media ($lg) {
    font-size: var(--size-3);
  }

  @media ($xl) {
    font-size: var(--size-4);
  }
}

.eyebrow1,
.eyebrow2,
.eyebrow3 {
  font-family: var(--font-sans);
  line-height: 1.25;
  font-weight: 500;
  word-spacing: var(--letter-space-large-3);
  text-transform: uppercase;
}

.eyebrow1 {
  letter-spacing: var(--letter-space-large-3);

  @media (orientation: portrait) {
    font-size: var(--size-1);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-2);
  }

  @media (orientation: landscape) {
    font-size: var(--size-1);
  }

  @media ($md) {
    font-size: var(--size-1);
  }

  @media ($xl) {
    font-size: var(--size-2);
  }
}

.eyebrow2 {
  letter-spacing: var(--letter-space-large-2);

  @media (orientation: portrait) {
    font-size: var(--size-2);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-3);
  }

  @media (orientation: landscape) {
    font-size: var(--size-2);
  }

  @media ($md) {
    font-size: var(--size-2);
  }

  @media ($xl) {
    font-size: var(--size-3);
  }
}

.eyebrow3 {
  letter-spacing: var(--letter-space-large-2);

  @media (orientation: portrait) {
    font-size: var(--size-3);
  }

  @media (orientation: portrait) and ($sm) {
    font-size: var(--size-4);
  }

  @media (orientation: landscape) {
    font-size: var(--size-3);
  }

  @media ($md) {
    font-size: var(--size-3);
  }

  @media ($xl) {
    font-size: var(--size-4);
  }
}

.normal {
  max-width: 30em;
}

.wide {
  max-width: 34em;
}

.narrow {
  max-width: 20em;
}

.faded1 {
  color: var(--color-black-light-3);
}

.faded2 {
  color: var(--color-black-light-3);
}

.solid {
  line-height: 1;
}

.title {
  line-height: 1.25;
}

.prose {
  line-height: 1.5;
}
