/**
 * Media queries can't use custom CSS properties, so we use a Sass variable
 * instead to define/apply our breakpoints.
 */
/**
 * From https://github.com/twbs/bootstrap/blob/main/scss/mixins/_breakpoints.scss
 */
sharpen-assessment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-gray-3);
  margin-bottom: var(--spacing-lg);
}
sharpen-assessment-header .name {
  font-family: var(--font-family-serif);
  color: var(--color-evergreen);
  font-size: var(--font-size-md);
  /* TODO remove all heading margins and padding in reset */
  margin: 0;
}
sharpen-assessment-header .meta {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}
sharpen-assessment-header .meta .section {
  margin: 0;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-sm);
}