.block-articles {
  background: var(--jct-white);
  color: var(--jct-black);
}
.block-articles > .row.articles {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
.block-articles .article {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  column-gap: 16px;
  padding: 40px 16px;
  box-sizing: border-box;
  text-decoration: none;
  color: currentColor;
  transition: background 0.2s;
}
.block-articles .article:hover {
  background: var(--jct-grey-4);
}
.block-articles .article-meta {
  grid-column: 1 / 2;
  text-align: left;
  font: var(--body4);
}
.block-articles .article-title {
  grid-column: 3 / 7;
  text-align: center;
  font: var(--h2);
  margin: 0;
  padding: 0;
}
.block-articles .article-arrow {
  grid-column: 8 / 9;
  justify-self: end;
  font: var(--h2);
}
@media (max-width: 768px) {
  .block-articles .article {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 16px 20px;
  }
  .block-articles .article-meta,
  .block-articles .article-title,
  .block-articles .article-arrow {
    grid-column: 1 / 2;
    text-align: center;
  }
  .block-articles .article-arrow {
    justify-self: center;
  }
  .block-articles .article-title {
    font: var(--h4);
  }
}