/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/sobre/sobre.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
.about-page {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    padding: 72px 0;
}

.about-hero {
    text-align: center;
    max-width: 900px;
}

    .about-hero h1 {
        margin: 20px 0;
        font-size: clamp(2.4rem, 5vw, 4.5rem);
        line-height: 1.05;
        letter-spacing: -0.05em;
    }

    .about-hero p {
        color: var(--muted);
        font-size: 1.1rem;
        line-height: 1.8;
    }

.about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 18px;
    gap: 18px;
    margin-top: 56px;
}

@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
}