.account-hero {
  align-items: stretch;
  display: grid;
  gap: 40px;
  grid-template-columns: 1.05fr 1fr;
  margin-top: 38px;
  overflow: hidden;
  position: relative;
}

.account-hero::after {
  background: radial-gradient(circle, #5ee6a818, transparent 68%);
  content: "";
  height: 320px;
  pointer-events: none;
  position: absolute;
  right: -100px;
  top: -160px;
  width: 320px;
}

.account-label { align-items: center; display: flex; gap: 9px; }
.account-label span:last-child { color: var(--muted); font-size: 11px; letter-spacing: .12em; }
#account-dot { background: var(--red); border-radius: 50%; height: 7px; width: 7px; }
.balance-main > p { color: var(--muted); margin-top: 34px; }
.balance-main > strong { display: block; font-size: clamp(44px, 7vw, 76px); letter-spacing: -.06em; line-height: 1; margin: 8px 0 12px; }
.balance-main > small { color: var(--muted); }
.account-metrics { display: grid; grid-template-columns: 1fr 1fr; }
.account-metrics > div { border-left: 1px solid var(--line); border-top: 1px solid var(--line); padding: 24px; }
.account-metrics span,.account-metrics strong { display: block; }
.account-metrics span { color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.account-metrics strong { font-size: 21px; margin-top: 9px; }

@media (max-width: 760px) {
  .account-hero { grid-template-columns: 1fr; }
  .account-metrics > div:nth-child(odd) { border-left: 0; }
}