.case-title {
  margin-bottom: 60px;
}

.case-hero-image {
  --ratio: 50%;
  margin-top: 60px;
}

.case-hero-image .ratio-container {
  overflow: hidden;
}

.case-hero-image img {
  height: calc(100% + 32vh);
  transform: translateY(calc(32vh * (var(--progress) / 100) * -1));
}

.case-info-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.case-image-wide {
  --ratio: 50%;
  flex: 0 0 100%;
}

.case-random-cases {
  --ratio: 125%;
}

.case-info-item-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

@media (max-width: 979px) {
  .case-hero-image {
    --ratio: 125%;
  }
}