<html> HTML
<header class="hero">
  <h1>Fluid Headline</h1>
  <p>Scales smoothly between small and large screens.</p>
</header>
# CSS
/* Base page styles */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  line-height: 1.6;
  background: #fafafa;
  color: #111;
}
/* Visual container */
.hero {
  background: #222;
  color: #fff;
  /* TODO: Use clamp() to make horizontal padding scale with viewport width */
  padding-block: 2rem;
  border-bottom: 1px solid #444;
}
.hero h1 {
  margin: 0 0 0.5rem;
  /* TODO: Use clamp() to make font-size scale smoothly */
}
.hero p {
  margin: 0;
  opacity: 0.9;
}
Live preview updates as you type
Building preview…