/* ==== HERO (wider column so the headline wraps to 3 lines) ==== */
@media (min-width: 1024px) {
    .page-hero--center .page-hero__inner {
        max-width: calc(1040px + 2 * var(--container-pad));
    }
}

.page-hero--center .t-display {
    text-wrap: balance;
}

/* ==== STORY (origin split + founding facts) ==== */
.about-origin__facts {
    display: grid;
    gap: var(--grid-gap);
    margin-top: var(--s-7);
}

.about-fact {
    padding: var(--s-6);
    background: var(--c-chalk);
    text-align: center;
    display: grid;
    gap: var(--s-2);
}

@media (min-width: 768px) {
    .about-origin__facts {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==== MISSION ==== */
.about-mission__grid {
    display: grid;
    gap: var(--s-7) var(--grid-gap);
    margin-top: var(--s-7);
}

@media (min-width: 768px) {
    .about-mission__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==== VALUES ==== */
.about-values__grid {
    display: grid;
    gap: var(--s-6);
    margin-top: var(--s-7);
}

.about-values__item {
    display: grid;
    gap: var(--s-3);
    align-content: start;
}

.about-values__mark {
    width: 8px;
    height: 8px;
    background: var(--accent);
}

.about-values__quote {
    color: var(--c-ink-2);
}

@media (min-width: 768px) {
    .about-values__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .about-values__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}