@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="/img/blog/about-modern-sass.png" alt="About Modern Sass" />
    <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>
        <a class="post-author" href="https://adamlaki.com">
            <img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&amp;d=mm&amp;r=g" alt="" width="38" height="38">
            <span class="post-author__name">by Adam Laki</span>
        </a>
    </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="Cracking the Theme Switcher and Dark Mode" />
    <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>
        <a class="post-author" href="#">
            <img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&amp;d=mm&amp;r=g" alt="" width="38" height="38">
            <span class="post-author__name">by Adam Laki</span>
        </a>
    </div>
</div>