#character .character .character-unit {
  text-align: center;
}

#character .character .character-unit p span {
  font-size: 2rem;
  font-weight: bold;
}

@media screen and (max-width: 960px) {
  #character .character .character-unit p span {
    font-size: 1.8rem;
  }
}

#character .character .character-unit img {
  margin: 0 auto 8px auto;
  width: 100%;
  max-width: 300px;
}

#character .coloring .coloring-unit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media screen and (max-width: 960px) {
  #character .coloring .coloring-unit {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 520px) {
  #character .coloring .coloring-unit {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 960px) {
  #character .coloring .coloring-unit img {
    max-width: 100%;
  }
}

/*# sourceMappingURL=../../../maps/general/pages/character.css.map */