/* /souverains/ pages: wider small multiples for yield curves, the States x tenors yield matrix. */
.multiples.curves { grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); }
.multiples.curves svg { width: 100%; height: auto; }
.multiples.curves figcaption { font-style: normal; color: var(--ink); }
figure.slope { max-width: 440px; margin-right: 1rem; }
figure.slope svg { width: 100%; height: auto; }

/* one row per State: name, then one panel per tenor bucket (7 at most), all on one scale */
.ym-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1rem; align-items: end;
  border-top: 1px solid var(--hair); padding: .35rem 0 .1rem; }
.ym-row:last-child { border-bottom: 1px solid var(--hair); }
.ym-state { margin: 0 0 .9rem; font-size: .95rem; }
.ym-row .multiples { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2rem 1rem; }
.ym-row .multiple figcaption { font-style: normal; font-size: .78rem; }
.ym-row svg { width: 100%; height: auto; }
@media (max-width: 66rem) {
  .ym-row { grid-template-columns: minmax(0, 1fr); }
  .ym-state { margin: 0 0 .2rem; }
  .ym-row .multiples { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 44rem) {
  .ym-row .multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dot.mute { fill: var(--faint); }
@media (max-width: 44rem) {
  .multiples.curves .multiple { max-width: 20rem; }
}