3-column preview card component

Hello @mehdi-adham ,

I have some suggestions regarding your solution:

• First of all, you have used some extra div's it would look like this for each card

    <div class="col-2">
        <img src="images/icon-suvs.svg" alt="" aria-hidden="true">
        <h1 class="title">SUVs</h1>
        <p class="description">Take an SUV for its spacious interior, power, and versatility.  Perfect for your next family vacation and off-road adventures.</p>
        <a href="#" class="more" aria-label="" >Learn More</a>
    </div>

• For any decorative images, each img tag should have emptyalt=""(as you did )and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.

• you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech). Then use <h2> instead of`` <h1>```.

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important; 
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            
}

CSS

• border-radius and overflow hidden to the container that wraps the three cards.so you don't have to set it to individual corners.

• I recommend to use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

• use unitless numbers for line-height values to avoid unexpected results. The MDN documentation explains it well

Overall , your solution is good . Hopefully this feedback helps