/* The twirl marks the part doing circles. Each character has a transparent background. */
.circle-figure {
  display: block;
  object-fit: contain;
}
.wandering-person .circle-figure {
  position: relative;
  width: 220px;
  max-width: none;
  height: 230px;
  margin: 0 -10px;
}
.direction-c .movement-art .circle-figure {
  position: relative;
  width: 190px;
  height: 190px;
  max-width: 100%;
  transform: scale(1.08);
  transition: transform .15s;
}
.direction-c .movement:hover .circle-figure {
  transform: scale(1.08) rotate(-3deg);
}
#movement-image.circle-figure {
  width: 220px;
  height: 220px;
  max-width: 100%;
  margin: 0 auto 12px;
}
@media (max-width: 900px) {
  .wandering-person .circle-figure { width: 175px; height: 190px; }
  .direction-c .movement-art .circle-figure { width: 150px; height: 165px; }
}
@media (max-width: 800px) {
  .direction-c .movement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .direction-c .movement-art { width: 190px; height: 190px; }
  .direction-c .movement-art .circle-figure { width: 190px; height: 190px; }
}
@media (max-width: 600px) {
  .wandering-person .circle-figure { width: 135px; height: 140px; }
  .direction-c .movement-art { width: 150px; height: 160px; }
  .direction-c .movement-art .circle-figure { width: 150px; height: 150px; }
  #movement-image.circle-figure { width: 190px; height: 190px; }
}
@media (max-width: 360px) {
  .direction-c .movement-art .circle-figure,
  .direction-c .movement:hover .circle-figure { transform: none; }
}