.articles {
  --gap: 20px;
  --row-gap: 60px;
  padding-top: 100px;
  padding-bottom: 100px;
}

.articles__title {
  margin-bottom: 50px;
}

.articles__articles {
  display: -ms-flexbox;
  display: flex;
  gap: var(--gap);
  -ms-flex-direction: column;
      flex-direction: column;
  row-gap: var(--row-gap);
}

.articles__title {
  text-align: center;
}
.articles__title .article + .article {
  border-top: 1px solid rgba(var(--color-default), 0.2);
  padding-top: var(--row-gap);
}

.articles--grid {
  --gap: 80px;
  --row-gap: 60px;
}
.articles--grid .articles__articles {
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.articles--grid .article {
  width: calc(100% / var(--columns) - var(--gap) * (var(--columns) - 1) / var(--columns));
}

.article {
  position: relative;
}

h2.article__title {
  font-size: calc(var(--title-size) / var(--base) * 1rem);
}

.article__link {
  display: block;
}
.article__link:after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.article__image img {
  display: block;
}