#categories .category-grid--dynamic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 18px;
}

#categories[hidden],
#categories .category-grid--dynamic[hidden],
#categories .category-card[hidden] {
  display: none !important;
}

#categories .category-grid--dynamic:not([data-categories-ready]) {
  visibility: hidden;
}

#categories .category-card {
  min-height: 340px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(18, 18, 18, .07);
  background:
    radial-gradient(circle at 90% 18%, rgba(237, 28, 36, .11), transparent 30%),
    linear-gradient(145deg, #f8f8f8 0%, #eeeeee 100%);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .06);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

#categories .category-card::after {
  content: '';
  position: absolute;
  right: -75px;
  top: -95px;
  z-index: -1;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(237, 28, 36, .2);
  border-radius: 50%;
}

#categories .category-card:hover {
  transform: translateY(-5px);
  border-color: rgba(237, 28, 36, .2);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .1);
}

#categories .category-card > div {
  max-width: 48%;
}

#categories .category-card > div > p {
  display: none;
}

#categories .category-card h3 {
  margin-top: 0;
  font-size: clamp(28px, 2.4vw, 38px);
  letter-spacing: -.035em;
}

#categories .category-card > div > span {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 24px;
  border-radius: 999px;
  background: #ed1c24;
  padding: 0 18px;
  color: #fff;
  font-size: 13px;
  transition: transform .25s ease, background .25s ease;
}

#categories .category-card:hover > div > span {
  transform: translateX(4px);
  background: #cf1119;
}

#categories .category-card > img {
  right: -2%;
  bottom: -7%;
  width: 58%;
  height: 100%;
  filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .14));
}

#categories .category-card--featured {
  border-color: rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle at 88% 18%, rgba(237, 28, 36, .7), transparent 27%),
    linear-gradient(135deg, #080808 0%, #171717 100%);
  color: #fff;
}

#categories .category-card--featured::after {
  border-color: rgba(255, 255, 255, .2);
}

#categories .category-card--featured > img {
  filter: drop-shadow(0 28px 32px rgba(0, 0, 0, .4));
}

@media (max-width: 720px) {
  #categories .category-card {
    min-height: 290px;
  }
  #categories .category-card > div {
    max-width: 58%;
  }
  #categories .category-card > img {
    right: -10%;
    width: 60%;
  }
}