@media screen and (max-width: 1024px) {
  #blog,
  #blog-post {
    padding: 120px 0 60px 0;
  }

  .blog-hero,
  .blog-list-wrapper,
  .blog-post-hero,
  .blog-post-body,
  .blog-not-found {
    padding: 0 25px 30px 25px;
  }

  .blog-hero-inner,
  .blog-post-hero-inner {
    gap: 40px;
  }
}

@media screen and (max-width: 900px) {
  .blog-hero-inner,
  .blog-post-hero-inner {
    flex-direction: column;
  }

  .blog-hero-decor {
    order: -1;
    min-height: 180px;
  }

  .blog-post-hero-image img {
    max-height: none;
  }
}

@media screen and (max-width: 768px) {
  #blog,
  #blog-post {
    padding: 110px 0 50px 0;
  }

  .blog-list {
    grid-template-columns: 1fr;
  }

  .blog-card-image img {
    height: 200px;
  }

  .blog-not-found-inner {
    padding: 32px 22px;
  }
}