/* ===================================
    Typography
    =================================== */

h1, h2, h3, h4, h5, h6, .nav-list a, button {
     font-family: var(--font-family-heading);
     font-weight: 400;
     line-height: 1.3;
     letter-spacing: var(--letter-spacing-md);
}

h1, .h1 {
     font-size: var(--font-size-3xl);
}

h2, .h2 {
     font-size: var(--font-size-2xl);
}

h3, .h3 {
     font-size: var(--font-size-xl);
}

h4, .h4 {
     font-size: var(--font-size-lg);
}

h5, .h5, p.medium {
     font-size: var(--font-size-md);
}

p.base-2 {
     font-size: var(--font-size-base2);
}

h6, .h6, p.base {
     font-size: var(--font-size-base);
}

p.small {
     font-size: var(--font-size-sm);
}

@media screen and (max-width: 989px) {
     h1, .h1-mobile {
          font-size: var(--font-size-2xl);
     }

     h2, .h2-mobile {
          font-size: var(--font-size-xl);
     }

     h3, .h3-mobile {
          font-size: var(--font-size-lg);
     }

     h4, .h4-mobile {
          font-size: var(--font-size-md);
     }

     h5, .h5-mobile, p.medium-mobile {
          font-size: var(--font-size-base);
     }

     h6, .h6-mobile, p.base-mobile {
          font-size: var(--font-size-sm);
     }
}