.cases__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}

.cases__title {
  font-family: var(--font-serif);
  font-weight: 500;
  text-transform: uppercase;
  color: #faf8f4;
  letter-spacing: 0.145em;
  line-height: 1;
  white-space: nowrap;
  padding-left: 0.145em;
  text-shadow: 0 0 0.45em rgba(0, 0, 0, 0.75), 0 0.06em 0.2em rgba(0, 0, 0, 0.6);
}

.cases__ornament {
  display: block;
  color: var(--gold-mid);
}

.cases__ornament > svg,
.slider__chevron > svg,
.card__arrow > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.slider {
  position: relative;
  --cu: var(--u);
}

.slider__viewport {
  position: relative;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.slider.is-dragging .slider__viewport {
  cursor: grabbing;
}

.slider__track {
  position: relative;
  display: grid;
  grid-template-columns: var(--card-w, calc(285 * var(--u)));
}

.card {
  grid-area: 1 / 1;
  position: relative;
  width: var(--card-w, calc(285 * var(--u)));
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 2;
}

.card:nth-child(2) {
  transform: translate3d(calc(305 * var(--u)), 0, 0);
}

.card:nth-child(3) {
  transform: translate3d(calc(610 * var(--u)), 0, 0);
}

.card:nth-child(4) {
  transform: translate3d(calc(915 * var(--u)), 0, 0);
}

.card:nth-child(n + 5) {
  visibility: hidden;
}

.slider.is-ready .card {
  visibility: visible;
}

.slider.is-ready .card.is-off {
  visibility: hidden;
}

.card.is-exiting,
.card.is-entering {
  z-index: 1;
}

.slider.is-moving .card,
.slider.is-dragging .card {
  will-change: transform;
}

.card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: calc(415 * var(--cu));
  border: calc(4 * var(--cu)) solid transparent;
  border-radius: calc(11 * var(--cu));
  background:
    linear-gradient(180deg, #120e0b 0%, #110d0a 60%, #0f0b08 100%) padding-box,
    linear-gradient(180deg, #1f1000 0%, #281601 40%, #2c1802 100%) border-box;
  box-shadow:
    0 0 calc(10 * var(--cu)) rgba(201, 142, 52, 0.12),
    0 calc(12 * var(--cu)) calc(24 * var(--cu)) calc(-4 * var(--cu)) rgba(0, 0, 0, 0.6);
}

.card__inner::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--cu));
  border-radius: calc(8 * var(--cu));
  padding: 1px;
  background: linear-gradient(180deg, #3b1b01 0%, #3f2104 30%, #4f3007 80%, #7a5212 94%, #c08a1f 99%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  z-index: 2;
}

.card__media {
  position: relative;
  flex: none;
  height: calc(245 * var(--cu));
  overflow: hidden;
  border-radius: calc(7 * var(--cu)) calc(7 * var(--cu)) 0 0;
  background: #0b0806;
  isolation: isolate;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-user-drag: none;
  pointer-events: none;
}

.card__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.card__fx.is-live {
  opacity: 1;
}

.card__body {
  position: relative;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 calc(21 * var(--cu)) calc(20 * var(--cu));
  border-top: 1px solid rgba(3, 2, 2, 0.9);
  border-radius: 0 0 calc(7 * var(--cu)) calc(7 * var(--cu));
  box-shadow: inset 0 -1px 0 rgba(6, 4, 4, 0.85);
}

.card__title {
  margin-top: calc(14.3 * var(--cu));
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: max(15px, calc(21 * var(--cu)));
  line-height: 1.2;
  letter-spacing: 0.043em;
  text-transform: uppercase;
  color: #fbfaf7;
}

.card__text {
  margin-top: calc(8.8 * var(--cu));
  font-family: var(--font-sans);
  font-weight: 450;
  font-size: max(14px, calc(16.5 * var(--cu)));
  line-height: 1.2727;
  letter-spacing: 0.045em;
  color: #cccac8;
}

.card__more {
  position: relative;
  display: block;
  margin-top: auto;
  padding-top: calc(12 * var(--cu));
  color: #f5c832;
}

.card__more::before {
  content: "";
  position: absolute;
  inset: calc(-10 * var(--cu)) calc(-14 * var(--cu));
}

.card__arrow {
  display: block;
  width: calc(34 * var(--cu));
  height: calc(13 * var(--cu));
  transition: transform var(--exit-ms) var(--ease-in-quad);
}

.card__more:hover .card__arrow,
.card__more:focus-visible .card__arrow {
  transform: translateX(calc(6 * var(--cu)));
  transition: transform var(--enter-ms) var(--ease-in-out-quad);
}

.slider__arrow {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  color: var(--gold-mid);
  border-radius: 6px;
}

.slider__chevron {
  display: block;
  transition: transform var(--exit-ms) var(--ease-in-quad), filter var(--exit-ms) var(--ease-in-quad);
}

.slider__arrow:hover .slider__chevron,
.slider__arrow:focus-visible .slider__chevron {
  filter: brightness(1.18) drop-shadow(0 0 6px rgba(240, 190, 80, 0.45));
  transition: transform var(--enter-ms) var(--ease-in-out-quad), filter var(--enter-ms) var(--ease-in-out-quad);
}

.slider__arrow--prev:hover .slider__chevron,
.slider__arrow--prev:focus-visible .slider__chevron {
  transform: translateX(-4px);
}

.slider__arrow--next:hover .slider__chevron,
.slider__arrow--next:focus-visible .slider__chevron {
  transform: translateX(4px);
}

.slider__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.js .card__inner.is-pending,
.js .slider__arrow.is-pending {
  opacity: 0;
  transform: translateY(-4px);
}

.fx-css .card__media::before,
.fx-css .card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transition: opacity var(--exit-ms) var(--ease-in-quad);
}

.fx-css .card__media::before {
  background: var(--fx-img) 50% 50% / cover no-repeat, #ff2a1a;
  background-blend-mode: multiply;
  mix-blend-mode: screen;
  transform: translate3d(4px, 0, 0);
}

.fx-css .card__media::after {
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.34) 2px, rgba(0, 0, 0, 0.34) 3px),
    linear-gradient(90deg, rgba(0, 140, 255, 0.16), rgba(0, 140, 255, 0) 40%);
}

.fx-css .card__media .card__img {
  transition: transform var(--exit-ms) var(--ease-in-quad), filter var(--exit-ms) var(--ease-in-quad);
}

.fx-css .card__media.is-fx::before {
  opacity: 0.42;
  transition: opacity var(--enter-ms) var(--ease-in-out-quad);
  animation: card-fx-jitter 900ms steps(1, end) infinite;
}

.fx-css .card__media.is-fx::after {
  opacity: 1;
  transition: opacity var(--enter-ms) var(--ease-in-out-quad);
}

.fx-css .card__media.is-fx .card__img {
  transform: translate3d(-2px, 0, 0);
  filter: contrast(1.08) saturate(1.1);
  transition: transform var(--enter-ms) var(--ease-in-out-quad), filter var(--enter-ms) var(--ease-in-out-quad);
}

@keyframes card-fx-jitter {
  0% { transform: translate3d(4px, 0, 0); }
  18% { transform: translate3d(6px, -1px, 0); }
  36% { transform: translate3d(3px, 0, 0); }
  54% { transform: translate3d(5px, 1px, 0); }
  72% { transform: translate3d(4px, 0, 0); }
  90% { transform: translate3d(7px, 0, 0); }
}

@media (min-width: 1024px) {
  .cases__head {
    position: absolute;
    top: calc(39 * var(--u));
    left: calc(6 * var(--u));
    width: calc(1434 * var(--u));
  }

  .cases__title {
    font-size: calc(29 * var(--u));
  }

  .cases__ornament {
    width: calc(170 * var(--u));
    height: calc(21 * var(--u));
    margin-top: calc(11 * var(--u));
  }

  .slider {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  .slider__viewport {
    position: absolute;
    left: calc(107 * var(--u));
    top: calc(97 * var(--u));
    width: calc(1232 * var(--u));
    padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(48 * var(--u));
  }

  .slider__arrow {
    width: calc(56 * var(--u));
    height: calc(80 * var(--u));
    top: calc(71 * var(--u) + 207.5 * var(--cu));
  }

  .slider__arrow--prev {
    left: calc(48.5 * var(--u));
  }

  .slider__arrow--next {
    left: calc(1337 * var(--u));
  }

  .slider__chevron {
    width: calc(18 * var(--u));
    height: calc(32 * var(--u));
  }
}

@media (max-width: 1023.98px) {
  .cases__head {
    padding: 72px 20px 0;
  }

  .cases__title {
    font-size: clamp(22px, 5.6vw, 30px);
  }

  .cases__ornament {
    width: 150px;
    height: 19px;
    margin-top: 12px;
  }

  .slider {
    margin-top: 24px;
    margin-bottom: 24px;
    --cu: 1px;
    --card-w: 300px;
  }

  .slider__viewport {
    padding: 16px 24px 88px;
  }

  .card__title {
    font-size: clamp(15px, calc(21 * var(--cu)), 23px);
  }

  .card__text {
    font-size: clamp(14px, calc(16.5 * var(--cu)), 17.5px);
  }

  .card:nth-child(n + 2) {
    visibility: hidden;
  }

  .slider__arrow {
    bottom: 16px;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(226, 173, 69, 0.35);
    background: rgba(15, 11, 8, 0.72);
  }

  .slider__arrow--prev {
    left: calc(50% - 58px);
  }

  .slider__arrow--next {
    left: calc(50% + 10px);
  }

  .slider__chevron {
    width: 11px;
    height: 20px;
  }
}

@media (max-width: 639.98px) {
  .slider__viewport {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-css .card__media.is-fx::before {
    animation: none;
  }

  .card__arrow,
  .slider__chevron {
    transition: none !important;
  }
}

.card__kicker {
  margin-top: calc(13 * var(--cu));
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: max(10.5px, calc(12.5 * var(--cu)));
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f5c832;
  text-shadow: 0 0 0.6em rgba(245, 200, 50, 0.2);
}

.card__kicker + .card__title {
  margin-top: calc(9 * var(--cu));
}