.energy-compare {
  border: 1px solid var(--line);
  background: white;
  border-radius: 5px;
  padding: 18px;
  margin: 25px 0;
}
.energy-compare h2,
.energy-compare h3 {
  font-size: 13px !important;
  font-weight: 600;
  margin: 0 0 15px !important;
}
.energy-row {
  display: grid;
  grid-template-columns: 90px 1fr 38px;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  margin: 13px 0;
}
.energy-row > div {
  display: flex;
  background: #f0f2ed;
  height: 10px;
  border-radius: 2px;
  overflow: hidden;
}
.energy-row i {
  display: block;
  height: 100%;
  background: #8ea48d;
}
.energy-row .other {
  background: #b7c6b2;
}
.energy-row .fcc {
  background: #b9674e;
}
.energy-row b {
  font-size: 11px;
  font-weight: 500;
}
.chart-note {
  font-size: 11px !important;
  line-height: 1.65 !important;
  color: var(--muted);
}
.cost-row {
  display: grid;
  grid-template-columns: 185px 1fr 60px;
  gap: 15px;
  align-items: center;
  font-size: 12px;
  margin: 15px 0;
}
.cost-row > div {
  height: 16px;
  background: #edf1e8;
}
.cost-row i {
  height: 100%;
  display: block;
  min-width: 2px;
}
.cost-row b {
  font-weight: 550;
  text-align: right;
}
.money-flow {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 30px 0;
}
.money-flow > div {
  background: #edf2e8;
  border: 1px solid #d5dfd0;
  border-radius: 4px;
  flex: 1;
  padding: 13px;
  font-size: 11px;
}
.money-flow strong,
.money-flow span {
  display: block;
}
.money-flow span {
  font-size: 11px;
  margin-top: 7px;
  color: var(--muted);
}
.finance-visual {
  padding: 24px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.finance-visual h2:not(:first-child),
.finance-visual h3:not(:first-child) {
  margin-top: 35px;
}
.legend {
  flex-wrap: wrap;
  max-width: min(650px, calc(100vw - 40px));
}
.media-source img {
  max-height: 650px;
  width: 100%;
  object-fit: contain;
  background: #f4f5ef;
}
@media (max-width: 650px) {
  .cost-row {
    grid-template-columns: 105px 1fr 45px;
    gap: 9px;
    font-size: 11px;
  }
  .finance-visual {
    padding: 17px;
  }
  .money-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .money-flow > b {
    transform: rotate(90deg);
    justify-self: center;
  }
  .energy-row {
    grid-template-columns: 80px 1fr 35px;
    gap: 6px;
  }
}