/* solution case article — stacked slide images */

.jby-case {
  position: relative;
  z-index: 1;
  margin: 0 0 0 calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  overflow-x: clip;
  overflow-y: visible;
  color: var(--jby-ink);
  background: #fff;
}

.jby-case__hero {
  padding-bottom: 48px;
  background:
    radial-gradient(circle at 78% 30%, color-mix(in srgb, #007aff 28%, #fff) 0, transparent 25%),
    linear-gradient(
      125deg,
      color-mix(in srgb, #007aff 5%, #fff),
      color-mix(in srgb, #007aff 12%, #fff) 58%,
      color-mix(in srgb, #007aff 4%, #fff)
    );
}

.jby-case__eyebrow {
  margin: 0 0 14px;
  color: #1681ee;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.7px;
}

.jby-case__hero h1 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: var(--jby-tracking-heading, 0.03em);
}

.jby-case__lead {
  max-width: 640px;
  margin: 16px 0 0;
  color: var(--jby-muted);
  font-size: 16px;
  line-height: 1.75;
}

.jby-case__back {
  display: inline-flex;
  margin-top: 22px;
  color: var(--jby-blue);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.jby-case__back:hover {
  color: var(--jby-blue-dark);
}

.jby-case__inner {
  padding: 40px 0 72px;
}

.jby-case__slides {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 960px;
  margin: 0 auto;
  line-height: 0;
}

.jby-case__slides p,
.jby-case__slides figure {
  margin: 0;
  padding: 0;
}

.jby-case__slides img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 767.98px) {
  .jby-case {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .jby-case__hero { padding-bottom: 36px; }
  .jby-case__inner { padding: 28px 0 48px; }
}