blog-preview-card

Congratulations 🥳👏🎊🎉

I observed 🥸 your media query is for mobile displays. The more ideal approach is to use it for larger/desktop displays. Also, most (if not all) sizing values are in px. That is not very ideal for responsive design, kindly consider em, rem , percentage and other similar values. You can read more about it in this Mozilla Developer - Responsive Design article.

Also, here are other few ways to improve your solution;

• Remove

.card
{position: absolute;
top: 100px;
}

It is taking the .card element out of the flow of the document.

• Change

.container {
  background-color: var(--yellow);
  height: 100vh; //change
min-height:100vh
}

• You should consider putting div.attribution outside the section.container element then change it into footer.attribution to pass the html validation test, and if you want it to stick to the bottom then consider using a 2-row grid to create a sticky footer. Example code:

.layout{
display:grid;
grid-template-row: 1fr 1rem;
place-items: center center;
}
.card{
grid-row: 1/2;
}
.footer{
grid-row: 2/3;
}

• Responsive design recommendation: use width or max-width with percentage value for img or picture element

I hope this helps improve your solution. All the best 👍👍

great