.category-hero-image {
  position: relative;
  overflow: hidden;
  max-width: 1060px;
  min-height: 300px;
  margin: 24px 0 26px;
  border: 1px solid rgba(92, 127, 132, .28);
  border-radius: 24px;
  background: #dfe9e7;
  box-shadow: 0 22px 55px rgba(16, 35, 42, .12);
}
.category-hero-image[hidden] { display: none; }
.category-hero-image img { display: block; width: 100%; height: 330px; object-fit: cover; }
.category-hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 27, 36, .78), rgba(8, 27, 36, .12) 67%, transparent); }
.category-hero-image figcaption { position: absolute; z-index: 1; left: 28px; bottom: 25px; display: grid; gap: 7px; max-width: 540px; color: #fff; }
.category-hero-image figcaption span { color: #ff9a57; font-size: 10px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.category-hero-image figcaption strong { font-size: clamp(24px, 3vw, 38px); line-height: 1; letter-spacing: -.045em; }
.category-card-cover { position: relative; display: block; overflow: hidden; height: 150px; }
.category-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; }
.category-card:hover .category-card-cover img { transform: scale(1.035); }
@media (max-width: 680px) {
  .category-hero-image { min-height: 210px; margin: 18px 0 20px; border-radius: 18px; }
  .category-hero-image img { height: 230px; }
  .category-hero-image figcaption { left: 18px; right: 18px; bottom: 18px; }
  .category-hero-image figcaption strong { font-size: 25px; }
}