.about-hero {
    background: linear-gradient(rgba(23, 26, 31, 0.48), rgba(23, 26, 31, 0.7)),
        url("https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&w=1800&q=80") center/cover;
}

.about-grid {
    display: grid;
    gap: 56px;
    grid-template-columns: 0.9fr 1.1fr;
}

.about-grid p + p {
    margin-top: 18px;
}

.values {
    background: var(--color-green);
}

.mission-section {
    background: var(--color-stone);
}

.mission-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}

.mission-grid article {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: 28px;
}

.mission-grid h2 {
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.values-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}

.values-grid article {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius);
    padding: 28px;
}

.values-grid h2,
.values-grid p {
    color: var(--color-white);
}

.values-grid h2 {
    font-size: 1.5rem;
    margin-bottom: 12px;
}

@media (max-width: 760px) {
    .about-grid,
    .mission-grid,
    .values-grid {
        grid-template-columns: 1fr;
    }
}