my solution

Hello Coder 😊

Your solutions is just fabulous

I have a small suggestion for you regarding <h1> tags

<h1> tag :

It is mandatory to use a <h1> tag in your solution because <h1> tag is most important aspect in accessibility and it helps screen reader to navigate with your page in easy way

And H1 tags also help Google to understand the structure of a page. So if you're using H1s as Google recommends for your page title or content heading, your H1 is effectively telling Google “here's what my page is about.

In this solution you can use <h1> tag with .sr_only class

Like in HTML

<h1 class="sr_only"> 3 column preview card component </h1>

CSS :

.sr_only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

Now you have a <h1> tag for screen readers and it is visually hidden from screen

Hope that will be helpful