.lol-champ { position: relative; width: 48px; height: 48px; }
.lol-champ small { position: absolute; right: -4px; bottom: -4px; min-width: 18px; padding: 0 3px; border-radius: 2px; font: 700 10px/16px var(--body); text-align: center; color: var(--bright); background: #0b0b0b; box-shadow: 0 0 0 1px var(--edge); }
.match.remake { background: linear-gradient(90deg, rgba(255,255,255,.03), transparent 40%); }
.match.remake .score { color: var(--muted); }
.lol-sub { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }

.lol-build { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.lol-spells { display: grid; grid-template-columns: 20px; gap: 2px; }
.lol-items { display: inline-grid; grid-template-columns: repeat(7, 22px); gap: 2px; }
.lol-spells img, .lol-items img, .lol-items i { width: 100%; aspect-ratio: 1; border-radius: 2px; background: var(--well); box-shadow: 0 0 0 1px #000; }
.lol-keystone { width: 20px; height: 20px; border-radius: 50%; }
.lol-items i { display: block; opacity: .6; }
table.sb .lol-items { grid-template-columns: repeat(7, 20px); }

.lol-dmg { position: relative; display: inline-block; min-width: 72px; padding-bottom: 4px; }
.lol-dmg i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--loss); opacity: .8; }

@container (min-width: 901px) {
  .match.lol-match { grid-template-columns: 48px minmax(130px, 1.4fr) 112px 96px 64px 72px 218px 52px; }
}
@container (min-width: 761px) and (max-width: 900px) {
  .match.lol-match { grid-template-columns: 48px minmax(130px, 1.4fr) 112px 96px 64px 72px 52px; }
}
@container (min-width: 641px) and (max-width: 760px) {
  .match.lol-match { grid-template-columns: 48px minmax(0, 1fr) 112px 96px 64px 52px; }
}
@container (max-width: 640px) {
  .lol-champ { width: 40px; height: 40px; }
}