/* Family illustration series: scoped to the three examples. */
.money-page.visual-money .example-list > li { padding-top: 22px; }
.money-page.visual-money .example-illustration { width: min(100%, 290px); aspect-ratio: 3 / 2; margin: 0 auto 22px; }
.money-page.visual-money .example-illustration img { display: block; width: 100%; height: auto; }
.money-page.visual-money .example-list h3 .keep-phrase { display: inline-block; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; }
@media (min-width: 761px) and (max-width: 900px) {
  .money-page.visual-money .example-list { column-gap: 24px; }
}
@media (max-width: 760px) {
  .money-page.visual-money .example-list > li { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 22px; align-items: center; padding: 24px 0; }
  .money-page.visual-money .example-illustration { width: 136px; margin: 0; }
}
@media (max-width: 480px) {
  .money-page.visual-money .example-list > li { grid-template-columns: 112px minmax(0, 1fr); gap: 14px 18px; }
  .money-page.visual-money .example-list > li > div:not(.example-illustration) { display: contents; }
  .money-page.visual-money .example-list h3 { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; }
  .money-page.visual-money .example-list p { grid-column: 2; grid-row: 2; }
  .money-page.visual-money .example-illustration { grid-column: 1; grid-row: 2; }
  .money-page.visual-money .example-illustration { width: 112px; }
}
@media (max-width: 360px) {
  .money-page.visual-money .example-list > li { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
  .money-page.visual-money .example-illustration { width: 92px; }
}