Fix broken homepage mobile layout by preventing horizontal overflow

[ritorhymes]

Summary

On the homepage, the Notebook feature section overflows horizontally at certain viewport widths between 421px and 991px, creating page-wide horizontal scrolling that breaks the page layout and compresses text into very narrow columns (sometimes just 1–2 words per line) that are difficult to read. This fix contains overflow in that range by wrapping feature cards into a two-column layout while preserving existing behavior below 421px and at 992px+.

Why this approach?

• This was the simplest, lowest-risk fix: a targeted, scoped CSS media query for the affected range, with no template/HTML changes.
• It avoids reworking existing global breakpoint values, like expanding the <=420px behaviors which would collapse the layout earlier than intended and introduce unnecessary whitespace.
• It looks polished and fits the visual intent of the page.

What changed:

• Added a media query for @media (min-width: 421px) and (max-width: 991px) in _sass/components/_homepage.scss for .homepage-section .featurelist to enable wrapping.
• Updated .feature cards in that same range to fit two per row (width: 50%) with controlled spacing (margin, padding) and box-sizing: border-box to prevent overflow.
• Kept existing small-screen behavior (<=420px stacks vertically) and desktop behavior (>=992px) intact.

Before and After Screenshots

Mobile captures from a device with an approximately 450px viewport width

Before

Notice text content collapsing to 1-2 words per line, and the image underneath the feature section has empty whitespace to the right of it indicating page overflow

After

Notice all columns fit more than 2 words per line and the image under the feature section now has margins equal to the rest of the page indicating no page overflow*