Visually this looks great, and it's nice and responsive.
Do fix the interactive elements. Something can either be a button - which means it triggers some kind of interaction like opening a modal, or submitting a form, or changing something on a page. Or it can be a link (anchor) - which means it navigates to a new url. It can't be both.
In this design it would depend what the Learn More actually did. Probably it would take you to a product detail page, so these should be <a>
. Don't nest them inside a button.
One other thing I would probably do, is change the max-width
on your main container. Currently it's set to 75%, which is fine for medium-size displays, but gets unreasonably large on very big screens. I'd change that to either a fixed width like 800px, or, better still, something like 70ch
which will still flex the sizing based on your text-size, nut never get unreasonably big.
Make sure you only have one h1
element on a page too. In this kind of design, which is really a small component, that would be part of a larger full-page design, it can be hard to give it a proper h1. So I would suggest putting a visually hidden h1 inside your main element with a descriptive page title, and then making the section headings into h2s.