Blog components

<!-- Blog post preview: Variant 1 -->
<article>
  <a class="ratio d-flex hover-effect-scale rounded overflow-hidden mb-3 mb-sm-4" href="#" style="--fn-aspect-ratio: calc(300 / 416 * 100%)">
    <img src="assets/img/blog/v1/03.jpg" class="hover-effect-target" alt="Image">
  </a>
  <div class="nav pb-1 mb-2">
    <a class="nav-link text-body-secondary fs-xs text-uppercase p-0" href="#">Home improvement</a>
  </div>
  <h3 class="h5 mb-2">
    <a class="hover-effect-underline" href="#">How to modernize your home on a budget</a>
  </h3>
  <p class="fs-sm">Modernizing your home doesn't have to break the bank. Here are some budget-friendly tips to give your living space a mo...</p>
  <div class="nav fs-sm gap-3">
    <a class="nav-link fw-semibold p-0" href="#">by Darrell Steward</a>
    <span class="text-body-secondary">April 13, 2024</span>
  </div>
</article>

<!-- Blog post preview: Variant 2 -->
<article class="d-flex flex-column flex-sm-row align-items-sm-center gap-3 gap-sm-4">
  <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="#" style="max-width: 220px; --fn-aspect-ratio: calc(139 / 220 * 100%)">
    <img src="assets/img/blog/v2/05.jpg" class="hover-effect-target" alt="Image">
  </a>
  <div class="pt-1 pt-sm-0">
    <div class="nav align-items-center gap-2 text-body-secondary pb-2 mb-1">
      <a class="nav-link text-body-secondary fs-xs text-uppercase p-0" href="#">Industry news</a>
      <hr class="vr my-1 mx-1">
      <span class="fs-sm lh-0">June 17, 2024</span>
    </div>
    <h3 class="h5 mb-0">
      <a class="hover-effect-underline" href="#">2025 Subaru Outback leads the latest new car news</a>
    </h3>
  </div>
</article>

<!-- Blog post preview: Variant 3 -->
<article class="position-relative hover-effect-scale rounded overflow-hidden">
  <div class="ratio hover-effect-target" style=" --fn-aspect-ratio: calc(280 / 416 * 100%)">
    <img src="assets/img/blog/v3/03.jpg" alt="Image">
  </div>
  <span class="position-absolute bottom-0 start-0 w-100 h-100" style="background: linear-gradient(1deg, rgba(33, 42, 54, .75) 0.33%, rgba(33, 42, 54, .00) 45.72%)"></span>
  <div class="d-flex align-items-end position-absolute bottom-0 start-0 w-100 h-100 z-2 p-3">
    <h3 class="h5 mb-0">
      <a class="hover-effect-underline stretched-link text-white" href="#">Best features to ask your luxury home builder about</a>
    </h3>
  </div>
</article>

<!-- Blog post preview: Variant 4 -->
<article class="d-flex align-items-center gap-3">
  <a class="ratio ratio-1x1 d-flex flex-shrink-0 hover-effect-scale rounded-2 overflow-hidden" href="#" style="width: 96px">
    <img src="assets/img/blog/v3/th02.jpg" class="hover-effect-target" alt="Image">
  </a>
  <div>
    <h3 class="h6 pb-1 mb-2">
      <a class="hover-effect-underline" href="#">5 Reasons to install a backyard storage shed</a>
    </h3>
    <div class="fs-xs text-body-secondary">April 30, 2024</div>
  </div>
</article>

<!-- Blog post preview: Variant 5 -->
<article>
  <a class="ratio d-flex hover-effect-scale rounded overflow-hidden mb-3 mb-sm-4" href="#" style="--fn-aspect-ratio: calc(421 / 636 * 100%)">
    <img src="assets/img/blog/v4/featured01.jpg" class="hover-effect-target" alt="Image">
  </a>
  <div class="d-flex align-items-center gap-1 text-body-secondary pt-1 pt-sm-0 mb-3">
    <div class="position-relative nav flex-nowrap align-items-center">
      <div class="ratio ratio-1x1 flex-shrink-0 me-2" style="width: 24px">
        <img class="rounded-circle" src="assets/img/blog/v4/author/01.jpg" alt="Avatar">
      </div>
      <a class="nav-link stretched-link p-0" href="#">Dr. Martha Simpson</a>
    </div>
    <i class="fi-bullet"></i>
    <div class="fs-sm">May 13, 2024</div>
  </div>
  <h3 class="h4">
    <a class="hover-effect-underline" href="#">Herbal medicines: advantages and disadvantages</a>
  </h3>
  <a class="badge text-secondary-emphasis bg-body-secondary text-uppercase text-decoration-none" href="#">Herbal medicine</a>
</article>

<!-- Blog post preview: Variant 6 -->
<article class="d-sm-flex align-items-center">
  <a class="ratio d-flex hover-effect-scale rounded overflow-hidden order-sm-2" href="#" style="max-width: 132px; --fn-aspect-ratio: calc(124 / 132 * 100%)">
    <img src="assets/img/blog/v4/02.jpg" class="hover-effect-target" alt="Image">
  </a>
  <div class="order-sm-1 pt-4 pt-sm-0 pe-sm-4 pe-md-5 me-sm-2 me-md-0">
    <div class="d-flex align-items-center gap-1 text-body-secondary pt-1 pt-sm-0 mb-3">
      <div class="position-relative nav flex-nowrap align-items-center">
        <div class="ratio ratio-1x1 flex-shrink-0 me-2" style="width: 24px">
          <img class="rounded-circle" src="assets/img/blog/v4/author/03.jpg" alt="Avatar">
        </div>
        <a class="nav-link stretched-link p-0" href="#">Dr. Bessie Cooper</a>
      </div>
      <i class="fi-bullet"></i>
      <div class="fs-sm">June 09, 2024</div>
    </div>
    <h3 class="h5 mb-2">
      <a class="hover-effect-underline" href="#">How Healthgrades rates America's best hospitals</a>
    </h3>
    <p>Since its establishment in 1998, Healthgrades has been aiding consumers in assessing and contrasting hospital performance concerning care delivered during a hospital...</p>
    <a class="badge text-secondary-emphasis bg-body-secondary text-uppercase text-decoration-none" href="#">Hospital quality</a>
  </div>
</article>

<!-- Blog post preview: Variant 7 -->
<article class="position-relative hover-effect-scale">
  <div class="d-flex align-items-end gap-3 mb-3 mb-md-4">
    <div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-0" style="width: 140px; --fn-aspect-ratio: calc(100 / 140 * 100%)">
      <img src="assets/img/home/events/news/02.jpg" class="hover-effect-target" alt="Image">
    </div>
    <div class="fs-sm text-body-secondary text-uppercase" style="writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(-180deg)">Planning</div>
  </div>
  <h3 class="h5 mb-2">
    <a class="hover-effect-underline stretched-link" href="#">Event Ideas that Celebrate Culture, Community, and Your Brand</a>
  </h3>
  <p class="pb-1 mb-2">Embracing your community and celebrating culture together also makes business sense...</p>
  <div class="fs-sm text-body-secondary">15 mins read</div>
</article>