Responsive Four Card Feature Using CSS grid and flexbox

Hi,

1. Each site should has only one <h1>tag. Suggestion to improve:

<h1>
Reliable, efficient delivery
<span>Powered by Technology</span>
</h1>

1. You dont need .header. Use instead headerin your CSS. Also use maininsetad of .card in your CSS
2. grid-template-areas and grid-area can easily replace grid-row and grid-col. As conslusion your code is readable
3. Why you have a empty *.js file in your project? :)

I hope this is helpful feedback:

1. Use one h1 for the heading not two.
2. There is no need to wrap that heading in a div.
3. Remove the article and use a paragraph.
4. All img elements must have an alt attribute (even if it is left blank on these decorative icons).
5. You don't need extra divs inside the cards either. Keep the html as simple as possible.
6. Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
7. The body shouldn't ever have margin.
8. If you want to center the content on the page use flex or grid properties don't use large margins like margin top to make it look right on your screen/device. That won't work for everyone.