Bootstrap 5 Post Pagination Section Component

<!-- Post Pagination 1 - HCF Bootstrap 5 Component -->
<section class="hcf-post-pagination-1 bg-light py-5 py-xl-6">
  <div class="container overflow-hidden">
    <div class="row justify-content-lg-center gy-4 gy-md-0">
      <div class="col-12 col-md-6 col-lg-5 col-xl-4">
        <a href="#!" class="text-decoration-none">
          <h5 class="link-secondary fw-bold fs-6 mb-3">Previous Post</h5>
          <h2 class="link-dark fs-5 border-start border-10 p-3">Useful Skateboarding Tips For Beginners</h2>
        </a>
      </div>
      <div class="col-12 col-md-6 col-lg-5 col-xl-4">
        <a href="#!" class="text-decoration-none">
          <h5 class="link-secondary fw-bold fs-6 mb-3">Next Post</h5>
          <h2 class="link-dark fs-5 border-start border-10 p-3">Reasons Why Photography Is an Art Form</h2>
        </a>
      </div>
    </div>
  </div>
</section>

.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.border-6 {
  --bs-border-width: 6px;
}
.border-7 {
  --bs-border-width: 7px;
}
.border-8 {
  --bs-border-width: 8px;
}
.border-9 {
  --bs-border-width: 9px;
}
.border-10 {
  --bs-border-width: 10px;
}
@media (min-width: 576px) {
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 768px) {
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 992px) {
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1200px) {
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1400px) {
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
.hcf-post-pagination-1 a h2 {
  transition: border-color 0.5s ease;
}
.hcf-post-pagination-1 a:hover h2 {
  border-left-color: #0d6efd !important;
}