.articles__wrapper {
  color: var(--color-accent);
  background: var(--background-accent);
  position: relative;
}

.articles__wrapper .articles__container {
  position: relative;
  z-index: 1;
}

.articles > .articles__container {
  padding-right: 0;
  padding-left: 0;
}

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

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

.articles__list {
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  scroll-padding: 0 var(--horizontal-padding-mobile);
  scroll-behavior: smooth !important;
  -ms-overflow-style: none;
  display: flex;
  gap: 16px;
  margin: 0 calc(-1 * var(--horizontal-padding-mobile));
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}

.articles__title {
  color: inherit;
}

.articles__item {
  overflow: hidden;
  min-width: 358px;
  max-width: 358px;
  display: grid;
  grid-template-rows: max-content 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--background-primary);
  color: var(--color-primary);
  border-radius: var(--border-radius-rounded-blocks);
}

.articles__item:first-child {
  margin-left: var(--horizontal-padding-mobile);
}

.articles__item:last-child {
  margin-right: var(--horizontal-padding-mobile);
}

.articles__container .articles__wrapper .articles__top,
.articles__container .articles__wrapper .articles__list {
  padding-right: var(--horizontal-padding-mobile);
  padding-left: var(--horizontal-padding-mobile);
  margin: 0;
}

.articles__container .articles__wrapper .articles__item:first-child,
.articles__container .articles__wrapper .articles__item:last-child {
  margin: 0;
}

.articles__image-wrapper,
.articles__image-wrapper.no-image {
  aspect-ratio: 1 / 0.73;
}

.articles__image-wrapper.no-image {
  background: var(--background-primary-hover);
}

.articles__text-area {
  padding: 28px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.articles__tag {
  margin: 0 0 8px;
  font-family: var(--font-body, sans-serif);
  font-size: calc(var(--font-size-tagline) - 4px);
  color: var(--color-secondary);
}

.articles__heading {
  margin-bottom: 16px;
}

.articles__buttons {
  margin: 24px 0 0;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
}

.articles__button.button {
  margin: 0;
}

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

.articles__show-button.button {
  margin: 0;
  border-color: currentColor;
}

.articles__show-wrapper {
  padding: 31px 0 0;
  text-align: center;
}

.articles__top .articles__show-wrapper {
  display: none;
}

.articles__top + .articles__list {
  padding: 8px 0 0;
}

.articles .transition__sketch--top svg {
  transform:rotate(180deg);
}

@media (min-width: 992px) {
  .articles__top {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .articles__title {
    font-size: var(--font-size-h2);
    flex: 1 1 auto;
    margin: 0;
    padding-right: 16px;
  }

  .articles__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    margin: 0;
    scroll-padding: 0;
  }

  .articles__item {
    min-width: auto;
    max-width: none;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, 1fr);
  }

  .articles__item:first-child {
    margin-left: 0;
  }

  .articles__item:last-child {
    margin-right: 0;
  }

  .articles__image-wrapper,
  .articles__image-wrapper.no-image {
    aspect-ratio: auto;
  }

  .articles__text-area {
    padding: 44px 25px;
  }

  .articles__heading {
    margin-bottom: 9px;
  }

  .articles__show-wrapper {
    padding: 0;
    text-align: right;
  }

  .articles__bottom {
    display: none;
  }

  .articles__list--3 .articles__item:first-child,
  .articles__list--4 .articles__item:first-child,
  .articles__list--5 .articles__item:first-child,
  .articles__list--6 .articles__item:nth-child(3n + 1) {
    grid-column: 1 / 2;
    grid-row: span 2 / span 2;
    grid-template-columns: auto;
    grid-template-rows: repeat(2, 1fr);
    gap: 16px;
  }

  .articles__list--3 .articles__item:first-child .articles__text-area,
  .articles__list--4 .articles__item:first-child .articles__text-area,
  .articles__list--5 .articles__item:first-child .articles__text-area,
  .articles__list--6 .articles__item:nth-child(3n + 1) .articles__text-area {
    padding-top: 28px;
  }

  .articles__list--3 .articles__item:first-child .articles__tag,
  .articles__list--4 .articles__item:first-child .articles__tag,
  .articles__list--5 .articles__item:first-child .articles__tag,
  .articles__list--6 .articles__item:nth-child(3n + 1) .articles__tag {
    margin: 0 0 8px;
  }

  .articles__list--3 .articles__item:first-child .articles__heading,
  .articles__list--4 .articles__item:first-child .articles__heading,
  .articles__list--5 .articles__item:first-child .articles__heading,
  .articles__list--6 .articles__item:nth-child(3n + 1) .articles__heading {
    font-size: 40px;
    line-height: var(--line-height-md);
    margin: 0 0 24px;
  }

  .articles__top + .articles__list {
    padding: 50px 0 0;
  }

  .articles__top .articles__show-wrapper {
    display: block;
    flex: 0 0 180px;
    max-width: 180px;
  }

  .articles > .articles__container {
    padding-right: var(--horizontal-padding-mobile);
    padding-left: var(--horizontal-padding-mobile);
  }

  .articles__container .articles__wrapper {
    border-radius: var(--border-radius-rounded-blocks);
    padding-right: 16px;
    padding-left: 16px;
  }

  .articles__container .articles__wrapper .articles__top,
  .articles__container .articles__wrapper .articles__list {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 992px) {
  .articles__wrapper--padding-top {
    padding-top: var(--padding-top, 0);
  }

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

@media (min-width: 1100px) {
  .articles__tag {
    margin: 0 0 10px;
  }

  .articles__list,
  .articles__list--3 .articles__item:first-child,
  .articles__list--4 .articles__item:first-child,
  .articles__list--5 .articles__item:first-child,
  .articles__list--6 .articles__item:nth-child(3n + 1) {
    gap: 32px;
  }

  .articles__list--3 .articles__item:first-child .articles__text-area,
  .articles__list--4 .articles__item:first-child .articles__text-area,
  .articles__list--5 .articles__item:first-child .articles__text-area,
  .articles__list--6 .articles__item:nth-child(3n + 1) .articles__text-area {
    padding: 5px 49px 37px;
  }
}

@media (min-width: 1200px) {
  .articles > .articles__container {
    padding-right: var(--horizontal-padding);
    padding-left: var(--horizontal-padding);
  }

  .articles__container .articles__wrapper {
    padding-right: 40px;
    padding-left: 40px;
  }
}