Dev_Playbook

2026-03 — Responsividade da hero

Problema

A seção hero estava visualmente correta, mas:

• não se adaptava bem em telas menores
• dependia excessivamente de media queries

Solução

Refatorei a seção aplicando técnicas de CSS para responsividade fluida:

• clamp() para tipografia
• 100svh para altura
• max-width: 42ch para texto
• text-wrap: balance

A implementação pode ser vista no componente da hero responsiva.

Aprendizado

Responsividade não precisa depender apenas de breakpoints.

Propriedades modernas do CSS permitem criar layouts mais fluidos e previsíveis com menos código, simplificando a manutenção.