Grid Layout with Image Cards

This component uses Tailwind's grid system to create a responsive layout with image cards in columns. It has 3 main sections - an outer div for the background, a div to center and constrain the width, and a grid div for the card content. The grid has 1 column on mobile, 2 on tablet, 3 on desktop, and 4 on extra large screens. The cards use aspect ratio classes to maintain a set height vs width. Images are full bleed and background gray to create framed effect. Card titles, descriptions, and CTAs are stacked vertically. On hover the image opacity reduces to create visual emphasis on text.