.blog-heading-list{padding:clamp(6rem,9vw,8rem) 1.25rem 2.5rem;text-align:center}
    .blog-heading-list .page-title{font-size:clamp(2.35rem,5vw,3.35rem);line-height:1.2}
    .blog-heading-list .page-lead{max-width:760px;margin:1rem auto 0}
    .blog-list-panel{max-width:1120px;margin:0 auto;padding:0 1.25rem 5rem}
    .blog-list-panel .blog-list{display:grid;gap:1.25rem}
    .blog-list-panel .blog-list-item{align-items:stretch;gap:1.4rem;min-height:178px;padding:1.15rem;border-radius:22px;background:var(--card)}
    .blog-list-panel .blog-thumb{flex:0 0 220px;height:166px;min-height:166px}
    .blog-list-panel .blog-thumb img{width:100%;height:100%;min-height:0;object-fit:cover}
    .blog-list-panel .blog-summary{justify-content:space-between}
    .blog-list-panel .blog-summary h2{margin:0 0 .55rem;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.45}
    .blog-list-panel .blog-summary h2 a{color:var(--text)}
    .blog-list-panel .blog-summary h2 a:hover,.blog-list-panel .read-more{color:var(--accent)}
    .blog-list-panel .blog-summary p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;color:var(--muted);line-height:1.8}
    .blog-list-panel .read-more{display:inline-block;margin-top:.4rem;font-weight:650}
    .blog-list-panel .blog-date{margin-top:.8rem;text-align:left}
    .blog-list-panel .blog-pagination{margin-top:2rem}
    @media(max-width:640px){.blog-heading-list{padding-top:7rem}.blog-list-panel .blog-list-item{flex-direction:column;padding:1rem}.blog-list-panel .blog-thumb{flex-basis:auto;width:100%;height:190px;min-height:190px}.blog-list-panel .blog-thumb img{height:190px}.blog-list-panel .blog-summary h2{font-size:1.13rem}}

/* Blog pagination */
.blog-pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-pagination .pagination li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-pagination .pagination a,
.blog-pagination .pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  line-height: 1.4;
  text-decoration: none;
}

.blog-pagination .pagination a:hover {
  border-color: var(--primary);
  color: var(--accent);
}

.blog-pagination .pagination .active span {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.blog-pagination .pagination .disabled span {
  opacity: .45;
  cursor: default;
}

.blog-pagination .pagination a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}