/**
 * 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-choice-grid {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(2, 1fr);
  font-weight: bold;
  font-size: 18pt;
  text-align: center;
}
sharpen-choice-grid input {
  display: none;
}
sharpen-choice-grid[layout=column] {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-weight: normal;
  font-size: 24pt;
}
sharpen-choice-grid a, sharpen-choice-grid label {
  color: var(--color-pine);
  cursor: pointer;
  --animate-duration: 1.5s;
  text-decoration: none;
}
sharpen-choice-grid a img, sharpen-choice-grid label img {
  max-width: 100%;
}
sharpen-choice-grid a.highlight sharpen-card, sharpen-choice-grid a:hover sharpen-card, sharpen-choice-grid label.highlight sharpen-card, sharpen-choice-grid label:hover sharpen-card {
  background-color: var(--color-sky);
}

.storymaker sharpen-choice-grid a img {
  max-height: 10rem;
}