#blog-post-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  width: 100%;
}

#blog-post-list > article {
  position: relative;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 32px 38px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: none;
  transition: border-color .2s, transform .2s;
}

#blog-post-list > article:hover {
  border-color: #999;
  transform: translateY(-2px);
}

#blog-post-list h2 {
  margin: 0 45px 12px 0;
  font-size: 24px;
  letter-spacing: -.5px;
}

#blog-post-list h2 a {
  color: inherit;
  text-decoration: none;
}

#blog-post-list h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

#blog-post-list .subtitle {
  color: #777;
  font-size: 13px;
}

#blog-post-list .blog-arrow {
  position: absolute;
  top: 32px;
  right: 38px;
  font-size: 25px;
  color: #777;
  transition: transform .2s;
}

#blog-post-list article:hover .blog-arrow {
  transform: translate(3px, -3px);
}

@media (max-width: 600px) {
  #blog-post-list > article {
    padding: 24px;
  }
  #blog-post-list h2 {
    font-size: 21px;
  }
  #blog-post-list .blog-arrow {
    top: 24px;
    right: 24px;
  }
}

/* Hide blog post arrows */
#blog-post-list .blog-arrow {
    display: none;
}