/* ============================================================ PRISMA — responsividade-recursos.css Responsividade exclusiva do body da página recursos.html. Não contém header → coberto por menu-mobile.css Não contém footer → coberto por footer-mobile.css Importar no do recursos.html, após menu-mobile.css e footer-mobile.css: ATENÇÃO: os dois blocos @media que existiam em recursos.css foram movidos e expandidos para cá. Remova-os de recursos.css (incluindo as regras de header e footer que estavam dentro deles). ============================================================ */ /* ────────────────────────────────────────────────────────── BREAKPOINT PRINCIPAL — ≤ 1024px (tablet e mobile) ────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { /* === HERO DA PÁGINA === */ /* Remove a altura fixa — o conteúdo define a altura */ .hero { height: auto; margin-top: 32px; margin-bottom: 40px; padding: 28px 24px; } .hero h1 { font-size: 28px; } .label { font-size: 13px; } .description { font-size: 14px; max-width: 100%; } /* === CONTEÚDO === */ /* Adiciona padding lateral — conteúdo não encostar nas bordas */ .content { padding: 10px 18px 80px; } /* === GRID DE CARDS === */ /* 4 colunas → 2 colunas em tablet */ .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: -30px; } } /* ────────────────────────────────────────────────────────── MOBILE PEQUENO — ≤ 640px ────────────────────────────────────────────────────────── */ @media (max-width: 640px) { /* === HERO DA PÁGINA === */ .hero { margin-top: 20px; margin-bottom: 28px; padding: 22px 18px; } .hero h1 { font-size: 22px; } /* === CONTEÚDO === */ .content { padding: 10px 14px 60px; } /* === GRID DE CARDS === */ /* 2 colunas → 1 coluna em mobile */ .cards-grid { grid-template-columns: 1fr; gap: 12px; margin-top: -20px; } }