Review this generated responsive landing-page fragment before release.
Build a page that does not overflow horizontally, preserves DOM and focus order, keeps the primary action available, and lets the browser choose an appropriately sized hero image.
HTML
<main class="page">
<img
src="hero-1600.jpg"
srcset="hero-640.jpg 640w, hero-1600.jpg 1600w"
alt="Team reviewing a release">
<section class="content">
<article><h1>Ship with confidence</h1></article>
<div class="actions">
<a class="primary" href="/start">Start now</a>
<a href="/docs">Read docs</a>
</div>
</section>
</main>
<style>
.page { width: 100vw; padding-inline: 24px; }
.content {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
}
.actions { order: -1; }
@media (max-width: 48rem) {
.content { grid-template-columns: 1fr; }
.primary { display: none; }
}
</style>
generated code is illustrative, not from any one model