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

.post-heading {
  text-align: center;

  &__inner {
    display: grid;
    gap: spacer('s');
  }

  &__title {
    font-size: responsive-font-size(4.5rem, 50, '5vw + 1rem');
    margin-block: 0;
    text-wrap: balance;
  }

  &__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: spacer('xs:m');
    justify-content: center;
    margin-block-start: spacer-clamp('m', 'l');
  }

  .breadcrumb-list {
    justify-self: center;
  }
}

<div class="post-heading">
    <div class="container">
        <div class="post-heading__inner">
            <h1 class="post-heading__title">Why Mountains Is No Friend to Small Business</h1>
            <ol class="breadcrumb-list">
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Blog</a>
    </li>
    <li>
        <span aria-current="page">Why Mountains Is No Friend to Small Business</span>
    </li>
</ol>
            <div class="post-heading__meta">
                <a class="post-author" href="https://adamlaki.com">
    <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>
                <span>Posted in <a href="#">Business</a>, <a href="#">Notes</a></span>
                <span>
                    <span class="sr-only">Posted on</span>
                    <time datetime="2022-03-17T11:47:25+01:00">Mar 17, 2022</time>
                </span>
            </div>
        </div>
    </div>
</div>