Block Patterns - CTA - Grid layout with products and link

[juanfra]

Description

🛠️ The goal of this issue is to track the implementation of the Call to action - Grid layout with products and link pattern.
🧑‍💻 The implementation must follow the pattern creation guidelines, and should be assigned to its appropriate category.
🎨 Figma design

[karmatosed]

Assigning to myself but also noting this is blocked by presets #36

[carolinan]

This is no longer be blocked.

[graylaurenm]

I will give this a go.

[graylaurenm]

Questions:

1. Should the text at the top ("Our online store.") be a heading?
2. Should the text at the top be centered?
3. Please check the following locations and let me know if you want me to swap to a preset or hardcoded value:
   • Heading: font-size and letter-spacing hardcoded
   • Grid text: font-size preset (18px instead of 16px)
   • "$30": font-size hardcoded
4. Should I use a class and CSS to force the square aspect ratio on all grid items? For example, in my pull request you'll notice that if a smaller screen doesn't have an image in its row, those items won't be as tall as mocked.
5. Thoughts on implementation of grid here? On mid-size devices the last row may not be full.

[graylaurenm]

@beafialho can you address the above questions when you have a free moment?

[beafialho]

I left a comment here.