This section uses `min-h-screen` to be at least as tall as the viewport.
This inner div uses `w-full` (or responsive widths like `md:w-3/4`) to control its width within the full-height parent.
The parent `div` has `min-h-screen`.
Scroll if your content exceeds viewport height.
min-h-screen
: Makes an element at least 100% of the viewport height. It's useful for top-level page sections that should fill the screen, like hero banners or main content wrappers. If content is taller, the element will grow.
w-full
: Makes an element take up 100% of its parent's available width.
Note on `min-h-screen` vs `h-screen`: `h-screen` sets a fixed height to 100vh. If content overflows, it might be cut off or require scrolling within that fixed height. `min-h-screen` is generally more flexible as it allows the container to grow if content is larger than the viewport.