/**
 * @file
 * Typography: headings and dates.
 */

.date, .datetime {
  font-size: 0.85rem;
    color: #666; /* Grayish color to push it into the background */
    white-space: nowrap; /* Prevents dates from breaking into two lines */
}

h1,
h2,
h3 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
  color: var(--mt-color-high-contrast, #363636);
}

h4,
h5 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  font-weight: 500;
  color: var(--mt-color-high-contrast, #363636);
}

h6 {
  line-height: 1.4;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: var(--mt-color-high-contrast, #363636);
}

/* restated */
@media (max-width: 767px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 1.125rem;
    margin-bottom: 1.125rem;
  }
}

h6 {
  font-size: 0.975rem;
}
h1 {
  font-size: 2.25rem;
}
h1.page-title {
  margin-bottom: 30px;
}

h1,
h2,
h2.title,
h3,
h4,
h5 {
    font-weight: 700;
}

@media screen and (min-width: 992px) {
  h1 {
    font-size: 2em;
  }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
  h1,
  h2 {
    font-size: 1.75em; /* 28px / 16px */
  }
}

@media screen and (max-width: 768px) {
  h1,
  h2 {
    font-size: 1.5em; /* 24px / 16px */
  }
}