.articles__wrapper {
  --article-min-width: 280px;
  --indent-xs: 16px;
  --indent-sm: 24px;
  --image-ratio: 1 / 0.84;

  position: relative;
  color: var(--color-primary);
  background: var(--background-primary);
}

.articles__wrapper--padding-top {
  padding-top: var(--padding-top-mobile);
}

.articles__wrapper--padding-bottom {
  padding-bottom: var(--padding-bottom-mobile);
}

.articles__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--article-min-width), 1fr));
  gap: var(--indent-sm);
}

.article {
  display: grid;
  grid-template-rows: max-content 1fr;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-block);
}

.article__image-wrapper {
  aspect-ratio: var(--image-ratio);
  position: relative;
  overflow: clip;
  border-top-left-radius: var(--border-radius-block);  /* fix for flattened articles */
  border-top-right-radius: var(--border-radius-block); /* on iPhone 11 */
}

.article__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

.article__text-area {
  padding: 28px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--color-secondary);
}

.article__tag {
  font-size: calc(var(--font-size-regular) - 2px);
  font-weight: var(--font-weight-regular);
  padding: 4px 8px;
  margin-bottom: 18px;
  letter-spacing: 0;
  color: var(--color-accent);
  background: var(--background-accent);
  border-radius: var(--border-radius-badge);
  align-self: flex-start;
}

.article__heading {
  margin-bottom: var(--indent-xs);
}

.article__text:not(:last-child) {
  margin-bottom: 24px;
}

.article__buttons {
  margin-bottom: calc(-1 * var(--button-margin-bottom));
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
}

.article__button,
.article__button:hover {
  color: var(--color-primary);
}

.article__button path {
  fill: var(--color-primary);
}

@media (min-width: 768px) {
  .articles__wrapper {
    --article-min-width: 320px;
  }
}

@media (min-width: 992px) {
  .articles__wrapper {
    --indent-xs: 8px;
    --indent-sm: 30px;
    --image-ratio: 1 / 0.57;
  }

  .articles__wrapper--padding-top {
    padding-top: var(--padding-top);
  }

  .articles__wrapper--padding-bottom {
    padding-bottom: var(--padding-bottom);
  }
}

@media (min-width: 1200px) {
  .articles__grid {
    grid-template-columns: repeat(var(--grid-element), minmax(var(--item-min-width), 1fr));
  }
}