/* /blog index: layout uses the approved prototype and shared Article card styles. */
.blog-index-main {
  padding: 22em 0 12em;
}

.blog-breadcrumbs {
  margin-bottom: 3.2em;
}

.blog-index-title {
  margin-bottom: 2em;
}

.blog-index-list {
  font-size: 1.8em;
  line-height: 1.62;
}

.blog-index-empty {
  margin: 0;
  color: #747474;
  font-size: 1.8em;
  line-height: 1.62;
}

.blog-index-pagination {
  margin-top: 4em;
}

.blog-index-pagination-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-index-pagination-link {
  display: inline-flex;
  min-height: 2.75em;
  align-items: center;
  justify-content: center;
  padding: .55em .8em;
  border: 1px solid #dedede;
  color: #191f23;
  line-height: 1.2;
  text-decoration: none;
}

a.blog-index-pagination-link:hover {
  background: #f5f5f5;
}

.blog-index-pagination-link.is-current {
  border-color: #191f23;
  background: #191f23;
  color: #fff;
}

.blog-index-pagination-link.is-disabled {
  color: #747474;
}

.blog-index-pagination-ellipsis {
  padding-inline: .25em;
  color: #747474;
}

@media screen and (max-width: 479px) {
  .blog-index-main {
    padding-top: 17em;
    padding-bottom: 7em;
  }

  .blog-breadcrumbs {
    margin-bottom: 2.5em;
  }

  .blog-index-title {
    margin-bottom: 1.5em;
  }

  .blog-index-list,
  .blog-index-empty {
    font-size: 1.65em;
  }

  .blog-index-pagination {
    margin-top: 3em;
  }

  .blog-index-pagination-list {
    gap: .3em;
  }

  .blog-index-pagination-link {
    padding-inline: .65em;
  }
}