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

.blog-block {
  padding-block: spacer-clamp('xl', 'xxl');

  &__inner {
    display: flex;
    flex-direction: column;
    gap: spacer('l');
  }

  &__header {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: spacer('m');
    justify-content: space-between;
  }

  &__grid {
    @include layout-grid('m', 18rem);
  }
}

<section class="blog-block" aria-labelledby="blog-title">
    <div class="container">
        <div class="blog-block__inner">
            <div class="blog-block__header">
            <header class="block-heading block-heading--start">
                <p class="block-heading__eyebrow">Blog</p>
                <h2 class="block-heading__title" id="blog-title">Latest from the blog</h2>
                <p class="block-heading__text">Notes about CSS, Sass and design systems.</p>
            </header>
                <a class="btn btn--outline-primary" href="#">View all posts <svg class="btn__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></a>
            </div>
            <div class="blog-block__grid">
                <article class="post-card">
                    <img class="post-card__thumbnail" src="/img/blog/about-modern-sass.png" alt="" loading="lazy">
                    <div class="post-card__body">
                        <div class="post-card__meta">
                            <div class="post-card__tags">
                                <a href="#">#sass</a>
                            </div>
                            <time datetime="2022-12-03">December 3, 2022</time>
                        </div>
                        <h3 class="post-card__title">
                            <a class="post-card__link" href="#">About Modern Sass</a>
                        </h3>
                    </div>
                </article>
                <article class="post-card">
                    <img class="post-card__thumbnail" src="/img/blog/cracking-the-theme-switcher-and-dark-mode.png" alt="" loading="lazy">
                    <div class="post-card__body">
                        <div class="post-card__meta">
                            <div class="post-card__tags">
                                <a href="#">#css</a>
                            </div>
                            <time datetime="2023-05-02">May 2, 2023</time>
                        </div>
                        <h3 class="post-card__title">
                            <a class="post-card__link" href="#">Cracking the Theme Switcher and Dark Mode</a>
                        </h3>
                    </div>
                </article>
                <article class="post-card">
                    <img class="post-card__thumbnail" src="/img/blog/writing-better-css.png" alt="" loading="lazy">
                    <div class="post-card__body">
                        <div class="post-card__meta">
                            <div class="post-card__tags">
                                <a href="#">#css</a>
                            </div>
                            <time datetime="2023-08-21">August 21, 2023</time>
                        </div>
                        <h3 class="post-card__title">
                            <a class="post-card__link" href="#">Writing Better CSS</a>
                        </h3>
                    </div>
                </article>
            </div>
        </div>
    </div>
</section>