@use 'sass:map';
@use 'sass:math';

h1,
h2,
.h2,
h3,
.h3,
h4 {
  font-family: $font-heading;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  &:first-child {
    margin-top: 0;
  }

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

h2,
.h2 {
  font-size: 2rem;
  margin-bottom: (map.get($margins, 'typography') * 2);
}

h3,
.h3 {
  font-size: math.div(20px, $html-font-size) * 1rem;
  line-height: 1.2;
}

@include media($md-min) {
  h2,
  .h2 {
    font-size: math.div(48px, $html-font-size-md) * 1rem;
  }

  h3,
  .h3 {
    font-size: math.div(24px, $html-font-size-md) * 1rem;
  }
}

@include media($lg-min) {
  h2,
  .h2 {
    font-size: 3.6rem;
  }

  h3,
  .h3 {
    font-size: 2rem;
  }
}
