@use 'sprucecss/scss/spruce' as *;

.post-card {
  $this: &;

  @include a11y-card-link('.post-card__link', true);
  display: flex;
  flex-direction: column;
  gap: spacer('m');

  &--horizontal {
    align-items: center;

    @include breakpoint('xs') {
      flex-direction: row;
    }

    #{$this}__thumbnail {
      @include breakpoint('xs') {
        aspect-ratio: 1;
        inline-size: 10rem;
      }
    }
  }

  &__thumbnail {
    aspect-ratio: 16 / 10;
    border-radius: config('border-radius-sm', $display);
    object-fit: cover;
  }

  &__body {
    @include layout-stack(s);
  }

  &__meta {
    display: flex;
    flex-wrap: wrap;
    gap: spacer('xs') spacer('m');
    line-height: 1;
  }

  &__title {
    font-size: font-size('h3');

    a {
      color: color('heading');
      text-decoration: none;
    }
  }
}

<div class="post-card">
    <img class="post-card__thumbnail" src="https://ui.sprucecss.com/img/post/thumbnail/sigmund-4UGmm3WRUoQ-unsplash.jpg" alt="white printer paper on white table" />
    <div class="post-card__body">
        <div class="post-card__meta">
            <div class="post-card__tags">
                <a href="#">#notes</a>
            </div>
            <time datetime="2021-04-05T22:00:00.000Z">Apr 6, 2021</time>
        </div>
        <h2 class="post-card__title">
            <a class="post-card__link" href="#">Designing in the Browser</a>
        </h2>
        <a class="post-author" href="#">
            <img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&d=mm&r=g" alt="" width="38" height="38" />
            <span class="post-author__name">by Adam Laki</span>
        </a>
    </div>
</div>