/* Boxing world titles: each weight class with its champion per sanctioning body (overview), or one body's champions. */
.belts { display: grid; gap: var(--space-3); margin: 0; padding: 0 var(--space-4) var(--space-4); list-style: none; }
.belts__division { display: grid; gap: var(--space-2); padding-block-end: var(--space-3); border-block-end: 1px solid var(--line); }
.belts__division:last-child { border-block-end: 0; padding-block-end: 0; }
.belts__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--step-0); font-weight: 800; }
.belts__undisputed { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--gold, #C9A227) 20%, var(--surface)); color: var(--ink); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
:root[dir="rtl"] .belts__undisputed { letter-spacing: 0; text-transform: none; }
.belts__holders { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.belts__holder {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "body name" "body record"; column-gap: var(--space-2); align-items: center;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); background: var(--surface-2); border: 1px solid var(--line); min-inline-size: 0;
}
.belts__holder--maroc { border-color: color-mix(in srgb, var(--atlas-green) 45%, var(--line)); }
.belts__body {
  grid-area: body; align-self: center; min-inline-size: 56px; padding: 4px 6px; border-radius: var(--radius-s); background: var(--ink); color: var(--surface);
  font-size: 0.6875rem; font-weight: 900; letter-spacing: 0.04em; text-align: center; text-decoration: none; white-space: nowrap;
}
.belts__champion { grid-area: name; min-inline-size: 0; font-weight: 700; overflow-wrap: anywhere; }
.belts__champion a { color: inherit; text-decoration: none; }
.belts__champion a:hover { text-decoration: underline; }
.belts__record { grid-area: record; justify-self: start; font-size: var(--step--1); color: var(--ink-2); }
.belts--single .belts__division { grid-template-columns: minmax(0, 1fr); }
.belts--single .belts__holder { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "record"; }
@media (min-width: 720px) {
  .belts--single .belts__division { grid-template-columns: 220px minmax(0, 1fr); align-items: center; }
}