.references-archive {
  position: relative;
}
.references-archive .references-archive-wrapper {
  grid-column: 1/-1;
}
.references-archive li {
  list-style-type: none;
}
.references-archive ul {
  background-color: transparent !important;
}
.references-archive ul.loading:after {
  content: "";
  width: 1.875rem;
  height: 1.875rem;
  display: inline-block;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2227%2027%2046%2046%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M73%2C50c0-12.7-10.3-23-23-23S27%2C37.3%2C27%2C50%20M30.9%2C50c0-10.5%2C8.5-19.1%2C19.1-19.1S69.1%2C39.5%2C69.1%2C50%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20attributeType%3D%22XML%22%20type%3D%22rotate%22%20dur%3D%221s%22%20from%3D%220%2050%2050%22%20to%3D%22360%2050%2050%22%20repeatCount%3D%22indefinite%22%20%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 30px 30px;
  margin: 60px auto;
  grid-column: 1/-1;
}
.references-archive ul.loading .article-card-wrapper {
  display: none;
}

.references-archive .filter {
  margin-bottom: 6.5625rem;
}
.references-archive .filter li {
  display: inline-block;
  margin-right: 1.875rem;
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  padding: 1.0625rem 2.8125rem;
  font-family: var(--font-family-black);
  border-radius: 0.375rem;
  font-size: 1.25rem;
  color: #4f4f4f;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.references-archive .filter li:last-child {
  margin-right: 0;
}
.references-archive .filter li.active, .references-archive .filter li:hover {
  background-color: var(--black);
  color: var(--white);
}
@media (max-width: 64rem) {
  .references-archive .filter {
    margin-bottom: 3.75rem;
  }
  .references-archive .filter li {
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
    margin-right: 0.625rem;
    margin-bottom: 0.625rem;
  }
}

.references-archive .pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 20px;
  grid-column: 1/-1;
}
.references-archive .pagination button {
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 0.3125rem;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: background-color 0.3s ease, transform 0.3s ease;
  transition: background-color 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}
.references-archive .pagination button:hover {
  background-color: var(--yellow);
  color: #fff;
}
.references-archive .pagination.current {
  background-color: var(--yellow);
  color: white;
  border: 1px solid var(--yellow);
}
.references-archive .pagination.current:hover {
  background-color: var(--yellow);
}