.brush-illustration {
  display: block;
  width: 100px;
  aspect-ratio: 1;
  background-color: #9b3d38;
  -webkit-mask: var(--brush-image) center / contain no-repeat;
  mask: var(--brush-image) center / contain no-repeat;
  pointer-events: none;
}
.brush-onigiri { --brush-image: url('assets/brush-onigiri.png'); }
.brush-plum { --brush-image: url('assets/brush-plum.png'); }
.brush-salmon { --brush-image: url('assets/brush-salmon.png'); }
.brush-edamame { --brush-image: url('assets/brush-edamame.png'); }
.brush-hijiki { --brush-image: url('assets/brush-hijiki.png'); }
.brush-tarako { --brush-image: url('assets/brush-tarako.png'); }
.brush-miso { --brush-image: url('assets/brush-miso.png'); }
.brush-microwave { --brush-image: url('assets/brush-microwave.png'); }
.brush-tea { --brush-image: url('assets/brush-tea.png'); }
.story { position: relative; padding-bottom: 185px; }
.story-illustration { position: absolute; right: 48px; bottom: 26px; width: 145px; }
.flavors article { position: relative; padding-right: 100px; min-height: 112px; }
.flavors article > .brush-illustration { position: absolute; right: 0; top: 18px; width: 85px; }
.steps article > .brush-illustration { width: 110px; margin: 22px 0 0 auto; padding: 0; }
@media (max-width: 900px) {
  .flavors article { padding-right: 78px; }
  .flavors article > .brush-illustration { width: 68px; }
}
@media (max-width: 600px) {
  .story { padding-bottom: 130px; }
  .story-illustration { right: 24px; bottom: 18px; width: 105px; }
  .flavors article { padding-right: 0; }
  .flavors article > .brush-illustration { position: static; width: 76px; margin: 8px 0 0 auto; }
  .steps article > .brush-illustration { grid-column: 2; width: 90px; margin-top: 14px; }
}