/* The prototype never gives .stat-cards its own bare gap rule — the one real page that uses it
   (the homepage's Value section) scopes it to .value .stat-cards instead, since that page's own
   ancestor class is always there. A reusable tt360/card-grid instance can't rely on a specific
   page section class existing above it, so this bare rule (same 20px value confirmed from
   layout/value.css) gives the component a real default regardless of what wraps it. */
.stat-cards {
    gap: 20px;
    margin-top: 55px;
}

.stat-card {
    padding: 28px 28px 49px;
    background-color: rgba(var(--white), 1);
    border: 1px solid rgba(var(--terra-green), 0.15);
    border-radius: 4px;
}

.stat-card .stat-value {
    margin: 0;
    font-family: var(--font-headline);
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: -0.96px;
    color: rgba(var(--terra-green), 1);
}

.stat-card .stat-description {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

/* md */
@media (max-width: 767.98px) {
    .stat-card .stat-value {
        font-size: 26px;
    }
}