main[data-slv-knowledge-hub] .slv-resource-card {
  display: flex;
  min-height: 13rem;
  flex-direction: column;
  background-color: #111214;
  background-image:
    linear-gradient(rgb(9 10 12 / 20%), rgb(9 10 12 / 20%)),
    url("/images/hero-banners/alternate-lighter-charcoal.png");
  background-position: center;
  background-size: cover;
  box-shadow: 0 14px 34px rgb(0 0 0 / 18%);
}

main[data-slv-knowledge-hub] .slv-resource-card:nth-child(even) {
  background-image:
    linear-gradient(rgb(9 10 12 / 47%), rgb(9 10 12 / 47%)),
    url("/images/hero-banners/alternate-lighter-charcoal.png");
}

main[data-slv-knowledge-hub] .slv-resource-card > span {
  margin-top: auto;
}

main[data-slv-knowledge-hub] .slv-species-card {
  display: flex;
  min-height: 12rem;
  flex-direction: column;
  background-color: #111214;
  background-image:
    linear-gradient(rgb(9 10 12 / 20%), rgb(9 10 12 / 20%)),
    url("/images/hero-banners/alternate-lighter-charcoal.png");
  background-position: center;
  background-size: cover;
  box-shadow: 0 14px 34px rgb(0 0 0 / 18%);
}

main[data-slv-knowledge-hub] .slv-species-card:nth-child(even) {
  background-image:
    linear-gradient(rgb(9 10 12 / 47%), rgb(9 10 12 / 47%)),
    url("/images/hero-banners/alternate-lighter-charcoal.png");
}

main[data-slv-knowledge-hub] .slv-species-card .slv-species-actions {
  margin-top: auto;
}

main[data-slv-knowledge-hub] .slv-hub-filter {
  min-height: 2.75rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 0.75rem;
  background-color: rgb(9 10 12 / 82%);
  color: #f4f4f5;
}

main[data-slv-knowledge-hub] .slv-hub-filter:focus-visible,
main[data-slv-knowledge-hub] .slv-species-card a:focus-visible {
  outline: 2px solid #f6c453;
  outline-offset: 3px;
}

main[data-slv-knowledge-hub] .slv-hub-article-card[hidden] {
  display: none;
}

main[data-slv-knowledge-hub] .slv-resource-card:focus-visible {
  outline: 2px solid #f6c453;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  main[data-slv-knowledge-hub] .slv-resource-card,
  main[data-slv-knowledge-hub] .slv-species-card {
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }

  main[data-slv-knowledge-hub] .slv-resource-card:hover,
  main[data-slv-knowledge-hub] .slv-species-card:hover {
    box-shadow: 0 18px 40px rgb(0 0 0 / 28%);
    transform: translateY(-2px);
  }
}