All solutions

Using Tailwind made this project fairly simple once I had the base mobile structure set up. I did have some trouble getting the hero image sized & positioned correctly on the tablet and desktop breakpoints.

I built this responsive grid using TailwindCSS in combination with semantic HTML markup and a mobile-first approach. Tailwind makes mobile-first design so easy, because you build from the smallest breakpoint by default, then apply additional utility classes to target larger screens. For this challenge, I simply defined the two breakpoints in my tailwind.config.js file:

...
  theme: {
    screens: {
      sm: '375px',
      lg: '1440px',
    },
...

Then, I wrote my initial elements for the mobile view, and then went back and added additional classes using lg:* to target the desktop view. I struggled a little with positioning & sizing the overall container for the grid to get the spacing correct