/* Preserve each page's swimming paths while sharing the creature artwork. */
.fish, .title-fish {
  height: calc(var(--w) * .625);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 3px 4px rgba(21, 75, 88, .1));
}
.fish::before, .fish::after, .title-fish::before, .title-fish::after,
.fish > span, .title-fish > i { display: none; }
.fish:nth-child(3n + 1), .title-fish:nth-of-type(3n + 1) { background-image: url('assets/chirimon-shrimp.svg'); }
.fish:nth-child(3n + 2), .title-fish:nth-of-type(3n + 2) { background-image: url('assets/chirimon-crab.svg'); }
.fish:nth-child(3n), .title-fish:nth-of-type(3n) { background-image: url('assets/chirimon-squid.svg'); }
.title-fish:nth-of-type(4) { --y: 87px; }
@media (max-width: 700px) {
  .title-fish:nth-of-type(4) { --y: 72px; }
  .shirasu-school { z-index: 2; pointer-events: none; }
  .shirasu-school .fish:nth-child(1) { --x: 26px; --y: 214px; --w: 64px; --dx: 12px; --dy: 6px; }
  .shirasu-school .fish:nth-child(2) { --x: calc(100vw - 90px); --y: 205px; --w: 68px; --dx: -12px; --dy: 8px; }
  .shirasu-school .fish:nth-child(3) { --x: calc(100vw - 105px); --y: 575px; --w: 70px; --dx: -10px; --dy: -6px; }
  .shirasu-school .fish:nth-child(n + 4) { display: none; }
}