.about-stats {
padding-block: 5rem;
border-bottom: 1px solid var(--blk-border, var(--c-border));
}
.about-stats__inner {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--pad-x);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
align-items: stretch;
}
.about-stat {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 2rem;
height: 100%;
background-color: var(--blk-surface, var(--c-white));
border: 1px solid var(--blk-border, var(--c-border));
border-radius: var(--r-sm);
}
.about-stat__number {
display: inline-flex;
align-items: baseline;
gap: 0.15em;
width: fit-content;
max-width: 100%;
font-family: var(--f-heading);
font-size: var(--text-8xl);
line-height: 1;
color: var(--blk-text, var(--c-dark));
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.about-stat__number sup {
font-size: 0.4em;
line-height: 1;
vertical-align: baseline;
letter-spacing: 0;
}
.about-stat__label {
font-family: var(--f-ui);
font-size: var(--text-sm);
color: var(--blk-text, var(--c-text-2));
line-height: 1.4;
min-height: 2.8em;
}
.about-stat__accent {
display: block;
width: 24px;
height: 3px;
background-color: var(--blk-accent, var(--c-accent));
border-radius: 2px;
margin-top: auto;
}
@media (max-width: 1024px) {
.about-stats__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.about-stats { padding-block: 3.5rem; }
.about-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.about-stat { padding: 1.5rem; }
.about-stat__number { font-size: var(--text-6xl); }
.about-stat__label { min-height: 0; }
}
@media (max-width: 480px) {
.about-stats__inner { grid-template-columns: 1fr; }
}