/* ============================================
   ABOUT PAGE STYLES
   Used only by about.html: feature cards for capabilities and values.
============================================ */

.feature-grid {
    display: grid;
    gap: 1.25rem;
}

.feature-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.feature-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.feature {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--brand-red);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.feature p {
    margin: 0;
}

@media (max-width: 900px) {

    .split,
    .feature-grid.cols-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .feature-grid.cols-2 {
        grid-template-columns: 1fr;
    }
}