Fix mobile responsive layout for static page

[Copilot]

The static HTML page lacked proper mobile optimization, causing poor UX on smartphones with excessive padding, oversized elements, and horizontal button layouts unsuitable for narrow screens.

Changes

Enhanced the @media (max-width: 768px) query with comprehensive mobile optimizations:

• Spacing: Reduced body padding (2rem → 1rem) and header margin for better screen utilization
• Layout: Single-column content grid with adjusted padding (1.5rem) and gaps
• Buttons: Vertical stacking with full-width sizing for touch-friendly interaction
• Form elements: 16px font-size on inputs to prevent iOS auto-zoom on focus
• Preview section: Viewport-relative units (40vh/50vh) for scalable image display across device sizes
• Talk items: Single-column grid with optimized spacing

@media (max-width: 768px) {
    body { padding: 1rem; }
    .button-group { 
        flex-direction: column;
        gap: 0.75rem;
    }
    button { width: 100%; }
    input, select, textarea { font-size: 16px; /* Prevents zoom on iOS */ }
    .image-preview { min-height: 40vh; }
}

Screenshots

Before (Mobile 375px)

After (Mobile 375px)

Tablet (768px)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Layout responsivo no static</issue_title>
<issue_description>A página estática é feita com html css e js, porém ela não tem design responsivo para móbile

Ajustar essa tela para termos uma experiência agradável no celular</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Layout responsivo no static #14

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.