/* Blog listing (pages/blog.html). */

.blog-list { position: relative; padding: 51px 71px 101px; }
.blog-list .wave { position: absolute; top: 0; left: 0; right: 0; }
.page-title { position: relative; margin: 0; font: 600 56px/1 Helvetica, Arial, sans-serif; color: var(--white); text-align: center; }
.title-rule { width: 10%; height: 5px; margin: 22px auto 52px; background: var(--white); }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.post-card { display: flex; flex-direction: column; border: 3px solid #f2d700; border-radius: 8px; overflow: hidden; background: #eee; }
.post-card__image img { display: block; width: 100%; height: 198px; object-fit: cover; }
.post-card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 30px; }
.post-card__title { flex: 1; margin: 0; font: 400 16px/1.4 var(--font-ui); letter-spacing: -0.1px; }
.post-card__title a { color: #000; text-decoration: none; }
.post-card__more {
  margin-top: 10px; padding: 10px 20px; border: 2px solid #000; border-radius: 23px; background: #f2d700;
  color: #000; font: 400 var(--fs-22)/1.4 var(--font-ui); text-decoration: none;
}

@media (max-width: 1024px) {
  .blog-list { padding: 51px 21px 101px; }
  .title-rule { width: 22%; }
}
@media (max-width: 767px) {
  .blog-list { padding: 50px 26px 80px; }
  .page-title { font-size: 25px; }
  .title-rule { margin: 11px auto 23px; }
  .post-grid { grid-template-columns: 1fr; }
}