.articles {
  background-color: var(--stb-white);
  border: 1px solid var(--stb-border-gray);
}

.blog-post {
  position: relative;
  border-bottom: 1px solid var(--stb-border-gray);
  overflow: hidden;
}

.blog-post:last-child {
  border-bottom: none;
}

.blog-post .background {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 300ms ease;
}

.blog-post:hover .background {
  opacity: 1;
}

.blog-post>a {
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
  padding: 36px;
}

.blog-post .thumbnail,
.blog-post .thumbnail>img {
  width: 360px;
  height: 260px;
  object-fit: cover;
  border-radius: 12px;
}

.blog-post .article__content {
  width: 100%;
  transition: color ease 200ms;
}

.blog-post:hover .article__content {
  color: var(--stb-white);
}

@media screen and (max-width: 768px) {
  .blog-post>a {
    flex-direction: column;
  }

  .blog-post .thumbnail,
  .blog-post .thumbnail>img {
    width: 100%;
  }
}