.be { display: grid; gap: 14px; }

.be__out { display: flex; flex-direction: column; }
.be__out .tl-sub { margin-bottom: 24px; }
.be__band { margin: -2px 0 24px; }
.be__tiles { margin-top: auto; }

.be__band .tl-band__bar i:nth-child(1) { --seg: var(--tl-great); }
.be__band .tl-band__bar i:nth-child(2) { --seg: var(--tl-good); }
.be__band .tl-band__bar i:nth-child(3) { --seg: var(--tl-okay); }
.be__band .tl-band__bar i:nth-child(4) { --seg: var(--tl-low); }
.be__band .tl-band__bar i:nth-child(5) { --seg: var(--tl-poor); }
.be__band[data-seg="1"] .tl-band__bar i:nth-child(1),
.be__band[data-seg="2"] .tl-band__bar i:nth-child(2),
.be__band[data-seg="3"] .tl-band__bar i:nth-child(3),
.be__band[data-seg="4"] .tl-band__bar i:nth-child(4),
.be__band[data-seg="5"] .tl-band__bar i:nth-child(5) { opacity: 1; }
.be__band .tl-band__scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }

.be__plan-head { flex-wrap: wrap; row-gap: 6px; }
.be__plan-head > :last-child { color: var(--gk-grey); font-weight: 400; }
.be__plan-tiles { --cols: 4; }

@media (max-width: 1100px) {
  .be__plan-tiles { --cols: 2; }
}