Blog preview card using grid

I think you are on the right track! Just a few recommends that can help you improve:

1. Use SASS/SCSS instead of CSS – SASS is a preprocessor scripting language that extends the capabilities of CSS.(source) However, browsers can't understand SASS directly, so it needs to be compiled into CSS.(source) One benefit of using SASS is that you can organize your code better, such as by grouping all article-related styles into a common wrapper.

   • when you use CSS:

   .article__type {
       background-color: var(--yellow);
       font-family: 'Figtree', sans-serif;
       ...
   }
   
   .article__title {
       font-weight: 800;
       &:hover {
           color: var(--yellow);
           cursor: pointer;
       }
   }
   
   .article__text {
       color: var(--gray-500);
       line-height: 150%;
   }
   

   • with SASS/SCSS:

   .article {
       &__type {
           background-color: var(--yellow);
           font-family: 'Figtree', sans-serif;
           ...
       }
   
       &__title {
           font-weight: 800;
           &:hover {
               color: var(--yellow);
               cursor: pointer;
           }
       }
   
       &__text {
           color: var(--gray-500);
           line-height: 150%;
       }
   }
   

2. Enhance your semantic HTML – I’ve noticed that you're already using some semantic elements like <section> and <article>. However, here are a few additional recommendations:

   • put time inside <time>

   <time dateTime='2023-09-23'>Published 23 Sep 2023
   

   • put your image inside <figure>

   <figure className='card__graphics'>
   <img />
   </figure>
   

   • put someone's (e.g. author) info inside <address>

   <address className='card__author'>
       <img />
       <span className='card__author-name'>...</span>
   </address>