Font size chart

/* REM Font Size Chart for Headings with Line Heights */
:root {
  /* Base font size - 16px is browser default */
  font-size: 16px;
}

h1 {
  font-size: 2.5rem !important;    /* 40px */
  line-height: 1.2 !important;     /* 48px */
  margin-bottom: 1rem !important;
}

h2 {
  font-size: 2rem !important;      /* 32px */
  line-height: 1.25 !important;    /* 40px */
  margin-bottom: 0.875rem !important;
}

h3 {
  font-size: 1.75rem !important;   /* 28px */
  line-height: 1.3 !important;     /* 36.4px */
  margin-bottom: 0.75rem !important;
}

h4 {
  font-size: 1.5rem !important;    /* 24px */
  line-height: 1.35 !important;    /* 32.4px */
  margin-bottom: 0.625rem !important;
}

h5 {
  font-size: 1.25rem !important;   /* 20px */
  line-height: 1.4 !important;     /* 28px */
  margin-bottom: 0.5rem !important;
}

h6 {
  font-size: 1rem !important;      /* 16px */
  line-height: 1.5 !important;     /* 24px */
  margin-bottom: 0.5rem !important;
}

/* You can also add responsive adjustments */
@media (max-width: 768px) {
  h1 {
    font-size: 2.25rem !important;  /* 36px */
    line-height: 1.15 !important;   /* 41.4px */
  }

  h2 {
    font-size: 1.75rem !important;  /* 28px */
    line-height: 1.2 !important;    /* 33.6px */
  }

  h3 {
    font-size: 1.5rem !important;   /* 24px */
    line-height: 1.25 !important;   /* 30px */
  }

  h4 {
    font-size: 1.25rem !important;  /* 20px */
    line-height: 1.3 !important;    /* 26px */
  }

  h5 {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.4 !important;    /* 25.2px */
  }

  h6 {
    font-size: 1rem !important;     /* 16px */
    line-height: 1.5 !important;    /* 24px */
  }
}