Hello sir, here is the link for my attempt A Pen by Cleo (codepen.io).
Great work on this exercise. 
I have just one thing about the order of the media queries. You should reverse the order to go from small to large. For example your repeat(3, 1fr ) in the cards grid of min-width: 1300px gets overwritten by repeat(auto-fill, minmax(250px, 1fr)) of min-width: 1000px. That’s because on a 1920px screen both media queries are true.
On a general note: It’s amazing to see how your coding skills have increased from the first exercises you posted. Really a fantastic improvement! 
Have a nice day,
Michael
Hello sir, thanks very much for your encouragement I am so happy that you have noticed some progress in my work , I wouldn’t have progressed without you evaluations and positive feedback , thanks once more for that . I did some changes on the queries but I don’t know if they align with your suggestions , I would be glad if they do .
1 Like
Thank you for the kind words. It means a lot to me that my help has an impact 
Yes, this is exactly what I meant. When we now change the browser width from small to large the layout always looks nice. Great work!
One thing that you can pay attention to in future exercises is a consistent indention. I think it’s a good thing to match the indention of the given code. Example:
/* hard to read */
main{display: grid;
grid-template-columns: 2fr 1fr; gap: 20px; padding : 20px;
}
/* easy to read */
main {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
padding: 20px;
}
If you try to be consistent it will help you a lot with better readability when looking at your code some time later.
Hello sir, indention modified as you suggested.
1 Like