/** At this monitor size it is wider than Figma */
.quiz-question * {
  font-weight: 500;

}
.quiz-explanations {
  display: grid;
  background: var(--explanation-background);
  margin-block-start: 1.25rem;
  grid-gap: 1rem;
  gap: 1rem;

}
.quiz-explanations .quiz-explanation-item {
    padding: 25px 20px;
  }
.quiz-explanations .quiz-correct {
    --explanation-background: color-mix(
      in hsl,
      var(--sage),
      transparent 55%
    );
    background: var(--explanation-background);
  }
.quiz-explanations .quiz-incorrect {
    --explanation-background: color-mix(
      in hsl,
      var(--chilli),
      transparent 85%
    );
    background: var(--explanation-background);
  }
.quiz-explanations h3 {
    --heading-color: var(--dark);
    margin: 0;
  }
.quiz-explanations p {
    --body-color: var(--dark);
    margin: 0;
  }
.quiz-explanations .quiz-explanation-header {
    margin-bottom: 1rem;
    font-family: var(--heading-family);
  }
form {
  display: inline-grid;
  gap: 1ch;
}
form .form-element {
    display: grid;
    grid-template-columns: [input] auto [label] 1fr;
    align-items: center;
    grid-gap: 1ch;
    gap: 1ch;
  }
form button[type='submit'] {
      border: 1px solid var(--black);
      padding: .5rem;
      margin-top: 2ch;
    }
input {
  accent-color: var(--kale);
}
input[type='checkbox'],input[type='radio'] {
    block-size: 1.125em;
    inline-size: 1.125em;
  }
input[type='checkbox'] + label,input[type='radio'] + label {
      font-size: 1rem;
    }