.category.category--illustrated {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 335px;
  background: #091a2a;
  border-color: #38536c;
  color: #f5f8fb;
  text-align: start;
}

.category.category--illustrated[hidden] {
  display: none;
}

.category--illustrated .category-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform .35s ease;
}

.category--illustrated::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, #06142266 0%, #06142255 35%, #061422ed 100%);
  pointer-events: none;
}

.category--illustrated > :not(.category-image) {
  position: relative;
  z-index: 2;
}

.category--illustrated .card-top {
  width: 100%;
  margin-bottom: auto;
  color: #e3eff8;
}

.category--illustrated h3,
.category--illustrated p,
.category--illustrated .card-link {
  color: #f5f8fb;
}

.category--illustrated p {
  margin-bottom: 16px;
}

.category--illustrated .card-link {
  border-top-color: #ffffff55;
}

.category.category--illustrated:hover,
.category.category--illustrated:focus-visible {
  background: #091a2a;
  border-color: #a8cbe8;
}

.category--illustrated:hover .category-image,
.category--illustrated:focus-visible .category-image {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .category--illustrated .category-image { transition: none; }
}