.cases-page {
  width: min(100%, 1360px);
  margin: 0 auto;
  padding: 46px 24px 86px;
}

.cases-section + .cases-section {
  margin-top: 76px;
}

.cases-section__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 26px;
  color: var(--text);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.cases-section__title span {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(var(--red-rgb), .35);
}

.cases-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 16px;
}

.case-card {
  display: flex;
  flex: 0 0 calc((100% - 48px) / 4);
  min-width: 0;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.case-card:focus-visible { outline: 2px solid var(--soft-gold); outline-offset: 7px; border-radius: 6px; }

.case-card__name {
  width: 100%;
  min-height: 24px;
  margin: 0 0 2px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: .9375rem;
  font-weight: 750;
  line-height: 1.35;
  white-space: normal;
}

.case-card__art {
  display: flex;
  width: 100%;
  height: 248px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.case-card__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .28));
  transition: transform 180ms ease, filter 180ms ease;
}

.case-card:hover .case-card__art img {
  filter: drop-shadow(0 13px 14px rgba(0, 0, 0, .42));
  transform: translateY(-4px) scale(1.035);
}

.case-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.case-price__coin {
  display: block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  opacity: .75;
  filter: saturate(.65);
}

.case-card__price {
  margin-top: 6px;
  padding: 6px 0;
  transition: color 160ms ease;
}

.case-card:focus-visible .case-card__price {
  color: var(--gold-light);
}

@media (hover: hover) and (pointer: fine) {
  .case-card:hover .case-card__price { color: var(--gold-light); }
}

@media (max-width: 900px) {
  .cases-page { padding-right: 18px; padding-left: 18px; }
  .cases-grid { gap: 28px 16px; }
  .case-card { flex-basis: calc((100% - 32px) / 3); }
}

@media (max-width: 560px) {
  .cases-page { padding: 32px 12px 60px; }
  .cases-section + .cases-section { margin-top: 54px; }
  .cases-section__title { margin-bottom: 20px; font-size: 18px; gap: 10px; }
  .cases-section__title span { width: 6px; height: 6px; }
  .cases-grid { gap: 24px 10px; }
  .case-card { flex-basis: calc((100% - 10px) / 2); }
  .case-card__name { font-size: .875rem; }
  .case-card__art { height: 165px; }
  .case-card__price { font-size: .9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .case-card__art img { transition: none; }
  .case-card__price { transition: none; }
}