Challenge 3: Write srcset/sizes for a Two-Column Layout — Possible Solution ==================================================================== Product photo WHY THIS WORKS -------------- - The sizes attribute directly encodes the layout described: on screens 700px wide or narrower, the image occupies the FULL viewport width (100vw) — a single-column layout on small screens. On any WIDER screen, the image occupies HALF the viewport width (50vw), matching the two-column layout description. This follows the exact same "(max-width: ...) VALUE, FALLBACK-VALUE" structure as the chapter's own sizes example, just with the breakpoint and percentages changed to match this specific layout. - The order of conditions in sizes matters: the browser evaluates each comma-separated condition in order and uses the FIRST one that matches, falling through to the final unconditioned value (50vw) if none of the explicit conditions match — exactly mirroring how the chapter's own example structures its conditions. - srcset offers three candidate resolutions — 480w, 800w, and 1200w — giving the browser reasonable options across the range this layout actually needs: a phone under 700px wide showing the image at full width benefits from a moderate resolution like 480w or 800w, while a desktop screen showing the image at half its (much larger) viewport width might still need something in the 800w–1200w range depending on the actual screen size. Three candidates give the browser meaningful choices without an excessive number of near-duplicate files to generate and serve. - Combined, srcset tells the browser WHAT resolutions are available, and sizes tells it HOW WIDE the image will actually be rendered at a given viewport width — together, this lets the browser pick the smallest candidate that will still look sharp at its actual rendered size, without needing to wait for layout to be computed first (the sizes attribute lets it estimate rendered width immediately from the media conditions alone).