@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: radius('md');
    inline-size: 100%;
    object-fit: cover;
  }

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

  // The tags and the author link sit above the stretched title link, so they stay clickable.
  &__tags a,
  .post-author__name {
    position: relative;
    z-index: 1;
  }

  &:focus-within #{$this}__title a,
  &:hover #{$this}__title a {
    color: color('primary');
  }

  &__meta {
    color: color('muted');
    display: flex;
    flex-wrap: wrap;
    font-size: config('font-size-sm', $typography);
    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="/img/blog/about-modern-sass.png" alt="" loading="lazy" width="640" height="360">
    <div class="post-card__body">
        <div class="post-card__meta">
            <div class="post-card__tags">
                <a href="#">#sass</a>
            </div>
            <time datetime="2022-12-03T00:00:00.000Z">December 3, 2022</time>
        </div>
        <h2 class="post-card__title">
            <a class="post-card__link" href="#">About Modern Sass</a>
        </h2>
        <div class="post-author post-author--sm">
            <img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&amp;d=mm&amp;r=g" alt="" width="32" height="32" loading="lazy">
            <a class="post-author__name" href="https://adamlaki.com" rel="author">Adam Laki</a>
        </div>
    </div>
</div>
<div class="post-card post-card--horizontal">
    <img class="post-card__thumbnail" src="/img/blog/cracking-the-theme-switcher-and-dark-mode.png" alt="" loading="lazy" width="640" height="360">
    <div class="post-card__body">
        <div class="post-card__meta">
            <div class="post-card__tags">
                <a href="#">#css</a>
                <a href="#">#ui</a>
            </div>
            <time datetime="2023-05-30T00:00:00.000Z">May 30, 2023</time>
        </div>
        <h2 class="post-card__title">
            <a class="post-card__link" href="#">Cracking the Theme Switcher and Dark Mode</a>
        </h2>
        <div class="post-author post-author--sm">
            <img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&amp;d=mm&amp;r=g" alt="" width="32" height="32" loading="lazy">
            <a class="post-author__name" href="#" rel="author">Adam Laki</a>
        </div>
    </div>
</div>