Responsive-Like Blog Card

Hi, well done on what you've got so far!

There are some problems I'm encountering with this. I'll try to go through them one by one so you can remedy.

1. All content should be contained within landmarks this needs a main for the component and a footer for the attribution.
2. Remove all sections from this. The whole card could be one section, but there should be no section elements inside it. You don't need anything wrapping the inner elements of the card, only one div for the bottom section of the card to achieve the layout where the img and author have to go side by side. You know that should be a div because the only reason it's necessary is for layout purposes, there is no extra meaning needed.
3. Always use meaningful elements for text content. Text should never sit in divs or spans alone really. Use a paragraph element when text has no special meaning. In this: "Learning" should be a paragraph; the publish date should be a paragraph (maybe with the time element inside it just wrapping the date); the blog title should be a heading element (see point 4 in this); the description is a paragraph as you've done (no need for a wrapping element); the author name should be a paragraph.
4. As this is a card component that would sit within a page, probably alongside other similar cards, you know it would never serve as a page title. Therefore, the heading in it should not be a h1, which should always act as the main title for a web page's contents. Use a h2 instead for this.
5. This component's *function8 is to act as a signpost to a blog. But currently there is no interactive element, which means it would not be clickable or functional for anyone (it can't do what it's designed to do!). Add an anchor (link) element inside that heading, with the text inside. That is what will make this card clickable.
6. Continuing on this theme of making the card clickable, note that whenever you see a hover style in a design that is indicating something should be interactive. Don't just add hover styles to non interactive elements. By doing that, it makes it seem like the card is all clickable when it's not! To make the whole card clickable, you can: Set the card to be position relative; Add a pseudo element to the link you've just added inside that heading; Size the pseudo to be height and width 100% so it covers the card and position absolute. Now the whole card will be clickable because you've effectively made the link take up the whole space of the card.
7. Look up how and when to write alt text on images. There's a great post about this on the resources channel in discord if you want to look that up. Image descriptions should not include words like "image" or "picture" because they are already an image role. Decorative images should have an empty alt.
8. This is overflowing my screen and breaking, making it so that I can't see some of the card content. You can see this for yourself if you emulate on mobile landscape view, for example. This is caused by the body height being limited to 100vh. Don't limit the height of elements that contain text (including the body). Instead, use min-height so that the element can grow larger when necessary.
9. The card is also overflowing my mobile screen because it has an explicit width set, which is wider than my screen. All solutions should work at devices 320px wide, so make sure you test at that size. Instead of setting a width on the component use max-width instead. Width says "this must be this exact size". Max-width says "don't go any larger than this, but go narrower if you need to".
10. It's also better if you use rem and not px for that max width value. That means that the solution will adapt correctly for everyone, even if people have chosen to have a larger text size. (You can test this by going into your browser's settings and customizing the text size to 32px/200%).
11. Get into the habit of always including a full modern CSS reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good examples you can look up and use.
12. Beware nesting sass like this! This leads to highly specific and unwieldy CSS. It could become a nightmare to manage on a larger project. I've written up a full post about how to use sass nesting well and common pitfalls like this. Basically, place classes directly on what you want to style and try to stick to single class selectors.
13. Font size must never be in px. Use rem.
14. This should not have a media query. And you shouldn't be hiding content ever in certain screen views. Keep the attribution content available for everyone.