.moment {
  --font-family-body: "neue-haas-grotesk-display", sans-serif;;
  --font-size-body: 1.6rem;
  --font-body-letter-spacing: 0.1rem;

  --font-family-title: Alternate Gothic ATF Thin, sans-serif;
  --font-title-variation-settings: unset;
  --font-title-optical-sizing: auto;
  --font-title-style: normal;


  --font-h1-family: var(--font-family-title);
  --font-h1-variation-settings: unset;
  --font-h1-weight: 700;
  --font-h1-optical-sizing: auto;
  --font-h1-style: normal;
  --font-h1-line-height: 105%;
  --font-h1-letter-spacing: 0.1rem;
  --font-h1-size: 8rem;

  --font-h2-family: var(--font-family-title);
  --font-h2-variation-settings: unset;
  --font-h2-bold-variation-settings: unset;
  --font-h2-weight: 300;
  --font-h2-optical-sizing: auto;
  --font-h2-style: normal;
  --font-h2-line-height: 105%;
  --font-h2-letter-spacing: 0.02rem;
  --font-h2-size: 4.8rem;
  --font-h2-lg-size: 8rem;
  
  --font-h3-family: var(--font-family-title);
  --font-h3-area-family: var(--font-family-body);
  --font-h3-variation-settings: unset;
  --font-h3-area-variation-settings: unset;
  --font-h3-weight: 400;
  --font-h3-area-weight: 500;
  --font-h3-optical-sizing: auto;
  --font-h3-style: normal;
  --font-h3-line-height: 105%;
  --font-h3-letter-spacing: 0.02rem;
  --font-h3-size: 2.5rem;
  --font-h3-area-size: 2.0rem;
  
  --font-h4-family: var(--font-family-title);
  --font-h4-md-family: var(--font-family-body);
  --font-h4-sm-family: var(--font-family-body);
  --font-h4-variation-settings: unset;
  --font-h4-md-variation-settings: unset;
  --font-h4-sm-variation-settings: unset;
  --font-h4-weight: 200;
  --font-h4-md-weight: 300;
  --font-h4-sm-weight: 400;
  --font-h4-optical-sizing: auto;
  --font-h4-style: normal;
  --font-h4-line-height: 105%;
  --font-h4-letter-spacing: 0.02rem;
  --font-h4-size: 4rem;
  --font-h4-md-size: 2.2rem;
  --font-h4-sm-size: 1.4rem;

  --font-h5-family: var(--font-family-body);
  --font-h5-variation-settings: unset;
  --font-h5-semi-bold-variation-settings: unset;
  --font-h5-weight: 400;
  --font-h5-semi-bold-weight: 600;
  --font-h5-optical-sizing: auto;
  --font-h5-style: normal;
  --font-h5-line-height: 115%;
  --font-h5-letter-spacing: 0.02rem;
  --font-h5-size: 2.4rem;
  --font-h5-lg-size: 2.6rem;

  --font-h6-family: var(--font-family-body);
  --font-h6-variation-settings: initial;
  --font-h6-weight: 400;
  --font-h6-optical-sizing: auto;
  --font-h6-style: normal;
  --font-h6-line-height: 105%;
  --font-h6-letter-spacing: 0.02rem;
  --font-h6-size: 3rem;

  font-family: var(--font-family-body);
    
}
  
@media (min-width: 781px) and (max-width: 1024px) {
  .moment {
    --font-h1-size: 5.5rem;

    --font-h2-size: 4.2rem;
    --font-h2-lg-size: 6.2rem;

    --font-h3-area-size: 1.8rem;

    --font-h4-size: 3.5rem;
    --font-h4-md-size: 2.0rem;
    --font-h4-sm-size: 1.6rem;
    
    --font-h5-size: 2.2rem;
    --font-h5-lg-size: 2.4rem;
    --font-h6-size: 2.6rem;
  }
}

@media (min-width: 641px) and (max-width: 780px) {
  .moment {
    --font-h1-size: 5rem;

    --font-h2-size: 4.2rem;
    --font-h2-lg-size: 5.6rem;

    --font-h3-area-size: 1.6rem;

    --font-h4-size: 3rem;
    --font-h4-md-size: 1.8rem;
    --font-h4-sm-size: 1.4rem;

    --font-h5-size: 2.0rem;
    --font-h5-lg-size: 2.4rem;
    --font-h5-letter-spacing: 0.04rem;

    --font-h6-size: 2.4rem;
    --font-h6-letter-spacing: 0.04rem;
  }
}

@media (max-width: 640px) {
  .moment {
    --font-h1-size: 4.5rem;

    --font-h2-size: 3.2rem;
    --font-h2-lg-size: 5rem;

    --font-h3-area-size: 1.6rem;

    --font-h4-size: 2.8rem;
    --font-h4-md-size: 2rem;
    --font-h4-sm-size: 1.4rem;

    --font-h5-size: 1.8rem;
    --font-h5-lg-size: 2.2rem;
    --font-h5-letter-spacing: 0.04rem;

    --font-h6-size: 2.2rem;
    --font-h6-letter-spacing: 0.04rem;
  }
}