/* ityourself.com.br — responsividade (regra do projeto: @media SOMENTE aqui) */

@media (max-width: 900px) {
    .front-grid { grid-template-columns: repeat(2, 1fr); }
    .bench-stacks { grid-template-columns: 1fr; }
    .footer-rack { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .site-header .container { flex-direction: column; gap: .8rem; }
    .main-navigation ul { flex-wrap: wrap; justify-content: center; }
    .hero { padding: 3.2rem 0; }
    .hero h1 { font-size: 1.72rem; }
    .hero-subtitle { font-size: 1rem; }
    .first-build li { padding-left: 1.3rem; padding-top: 3.1rem; }
    .first-build li::before { top: .85rem; left: 1.2rem; }
}

@media (max-width: 480px) {
    .container { width: 95%; }
    .front-grid { grid-template-columns: 1fr; }
    .footer-rack { grid-template-columns: 1fr; gap: 1.5rem; }
    .hero h1 { font-size: 1.42rem; }
    .content-section > h2 { font-size: 1.3rem; }
    .bench-btn { display: block; text-align: center; }
}