.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--full {
  position: relative;
  padding: 50px 0;
}
.article--full :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote) + :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote) {
  margin-top: 1em;
}
.article--full .article-card {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 50px;
}
.article--full .article-card * {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  max-width: 100%;
}
.article--full .site-width {
  padding: 0;
  margin: 0;
}
.article--full h1 {
  width: 100%;
}
.article--full ul.article-card__categories li,
.article--full time.article-card__date {
  font-size: calc(18 / var(--base) * 1rem);
}
.article--full ul.article-card__categories {
  margin-left: 20px;
}
.article--full ul.article-card__categories li:before {
  display: none;
}
@media (min-width: 992px) {
  .article--full {
    padding: 100px 0;
  }
}

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;
}