Blog preview card with CSS and HTML

Hi, I have reviewed your code and I have seen some things that could be improved.

First of all you don't have a font-family: declared, this is included in the assets and can be declared as a custom property in the following way:

@font-face {
    font-family: "Figtree";
    src: url(assets/fonts/Figtree-VariableFont_wght.ttf) format("ttf"),
      url(assets/fonts/Figtree-Italic-VariableFont_wght.ttf) format("ttf");
  }
  --primary-font: "Figtree", sans-serif;

It is also important to use a safe font such as sans-serif as an alternative. Your container displays fixed at low resolutions, which causes horizontal scrolling, I saw that it may be because the image is not defined with a max-width: and when having the viewport in a less resolution it does not scale, this could be done introducing the image in a container and giving it the property max-width: since the container if it can scale in resolution also your image:

<div class="img">
      <img src="./assets/images/illustration-article.svg" alt="decorative image" class="decorative-image">
</div>

.decorative_image{
  max-width: 100%;
}

In the author, if you notice the image is not proportional to the design reference, as in the previous one, it can also be inside a container:

<div class="avatar">
        <div class="avatar-image">
          <img
            src="./assets/images/image-avatar.webp"
            alt="Profile photo of Greg Hooper"
            class="avatar-photo"
          />
        </div>
        <p class="tag-text">Greg Hooper</p>
</div>

.avatar-photo {
  max-width: 100%;
}

You can add the flex growth and reduction factor to achieve a result in which the text occupies, for example, one third of the container and the image, one fourth:

.avatar-image{
  flex: 1;	/*https://developer.mozilla.org/es/docs/Web/CSS/flex*/
}

.avatar-photo {
  max-width: 100%;
}

.tag-text {
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--color-gray-950);
	flex: 3;
}