.article-related .view-empty{
  text-align: center;
}
.article-related__title {
  display: flex;
  justify-content: center;
  padding-right: 1rem;
}
.article-related__title h2 {
  margin: 3rem 0;
}
.article-related__items {
  display: grid;
  gap: 32px;
  width: 100%;
  overflow: auto;
  padding: 0 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-brand--1) white;
}
.article-related__items::-webkit-scrollbar {
  width: 10px;
  height: 3px;
}
.article-related__items::-webkit-scrollbar-thumb {
  background: var(--color-brand--1);
}
.article-related__items--1 {
  grid-template-columns: repeat(1, 242px);
  justify-content: center;
}
.article-related__items--2 {
  grid-template-columns: repeat(2, 242px);
}
.article-related__items--3 {
  grid-template-columns: repeat(3, 242px);
}
.article-related__items--4 {
  grid-template-columns: repeat(4, 242px);
}
@media all and (min-width: 650px) {
  .article-related__items--2 {
    justify-content: center;
  }
  .article-related__items::-webkit-scrollbar {
    height: 7px;
  }
}
@media all and (min-width: 950px) {
  .article-related__items--3 {
    justify-content: center;
  }
}
@media all and (min-width: 1070px) {
  .article-related__items--4 {
    justify-content: center;
  }
}
@media all and (min-width: 1150px) {
  .article-related {
    align-self: center;
    padding: 0;
    max-width: 1400px;
    width: 100%;
  }
  .article-related__items {
    scrollbar-width: auto;
  }
}
@media all and (min-width: 1300px) {
  .article-related {
    margin: auto;
  }
  .article-related__items {
    justify-content: center;
    padding: 0;
  }
  .article-related__title {
    padding-right: 0;
  }
}

/**
 * Article Related Wrapper
 */

.article-related-wrapper {
  background-color: var(--color-brand--4);
  padding: 2rem 0 2rem 1.5rem;
}
@media all and (min-width: 1150px) {
  .article-related-wrapper {
    padding: 2rem 4rem 4rem;
    max-width: 1228.8px;
    width: 100%;
    margin: 0 auto;
  }
}