/*******************************************************
 * Blog Roll - Layout A
 *
 * @since 1.2.0 <26/09/2023>
 *******************************************************/
.hsbg-post {
  position: relative;
  min-height: 410px;
  background: var(--hsbg-neutral-color-9);
  border-radius: var(--hsbg-border-radius);
  padding: 10px;
}

.hsbg-post img {
  border-radius: var(--hsbg-border-radius);
  height: 200px;
  object-fit: cover;
  margin: 0 0 10px;
}

.hsbg-post h2 {
  font-size: var(--hsbg-font-size-h5);
}

.hsbg-post .excerpt {
  font-size: var(--hsbg-font-size-label);
  margin-bottom: 10px;
}

.hsbg-post .read-more {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: block;
  background: var(--hsbg-neutral-color-1);
  color: var(--hsbg-neutral-color-10);
  border-radius: var(--hsbg-border-radius);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  padding: 10px 15px;
}

/*******************************************************
 * Blog Roll - Layout A -> Pagination
 *
 * @since 1.2.0 <26/09/2023>
 *******************************************************/
.navigation.pagination {
  grid-column: 1 / -1;
}

.navigation.pagination .nav-links {
  display: flex;
  gap: 5px;
}

.navigation.pagination .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--hsbg-neutral-color-8);
  color: var(--hsbg-neutral-color-1);
  text-decoration: none;
  width: 40px;
  height: 40px;
  border-radius: var(--hsbg-border-radius);
}

.navigation.pagination span.page-numbers.current {
  background: var(--hsbg-neutral-color-1);
  color: var(--hsbg-neutral-color-10);
  font-weight: 700;
}

.navigation.pagination svg path {
  stroke: var(--hsbg-neutral-color-1);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}