body.has-zr-problems .wrapper {
  overflow: visible;
}

.zr-problems {
  position: relative;
  min-height: calc(100svh + var(--zr-problems-scroll, 360svh));
  background: #ECEEF4;
  color: #111b24;
  padding-top: 120px;
  border-radius: 120px 120px 0 0;
  margin-top: -120px;
}

.zr-problems__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #ECEEF4;
  padding-top: 100px;
}

.zr-problems__container {
  position: relative;
  height: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 28px;
}

.zr-problems__head {
  position: absolute;
  top: 120px;
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0 auto;
  width: min(950px, 100% - 48px);
  padding: 32px 0 0;
  text-align: center;
  transform: none;
  pointer-events: none;
}

.zr-problems__heading {
  margin: 0;
  color: #17212a;
  font-size: clamp(28px, 4.35vw, 42px);
  line-height: 0.96;
  font-weight: 400;
  letter-spacing: 0;
}

.zr-problems__title {
  margin-top: 60px;
  color: #111b24;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.zr-problems__orbit {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='776' height='816' viewBox='0 0 776 816' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M771.777 271.277C745.718 148.953 642.199 53.2162 521.909 13.6589C409.967 -23.1525 292.745 19.5717 192.371 80.7383C98.6752 137.833 23.3841 221.928 4.57262 328.91C-14.4021 436.809 27.5218 541.727 96.1663 627.832C172.408 723.469 269.346 826.034 392.253 815.212C493.518 806.295 552.503 716.17 609.414 629.217C620.422 612.395 631.353 595.694 642.497 579.722C651.229 567.208 660.281 554.677 669.373 542.094C730.339 457.704 793.012 370.955 771.777 271.277ZM350.221 691.616C531.112 691.616 677.754 546.817 677.754 368.2C677.754 189.583 531.112 44.7867 350.221 44.7867C169.33 44.7867 22.6875 189.583 22.6875 368.2C22.6875 546.817 169.33 691.616 350.221 691.616Z' fill='white' fill-opacity='0.48'/%3E%3C/svg%3E") no-repeat 0 0/contain;
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 0;
  width: min(1400px, 90vw);
  height: min(1400px, 90vw);
  transform: translate(-50%, 0) rotate(-7deg);
  pointer-events: none;
}

.zr-problems__model {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: max(50%, 280px);
  width: 336px;
  height: 560px;
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: none;
  overflow: hidden;
  border-radius: 50%;
}

.zr-problems__model img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  filter: saturate(0.8);
}

.zr-problems__lottie {
  width: 560px;
  height: 100%;
  position: absolute;
  left: -35%;
}

.zr-problems__lottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.zr-problems__model-placeholder {
  position: absolute;
  inset: 0;
  opacity: 1;
  background: radial-gradient(ellipse at 50% 9%, rgba(197, 218, 240, 0.85) 0 8%, transparent 8.5%), linear-gradient(90deg, transparent 43%, rgba(190, 214, 238, 0.62) 43% 57%, transparent 57%) 50% 16%/100% 46% no-repeat, radial-gradient(ellipse at 50% 43%, rgba(194, 218, 242, 0.68) 0 21%, transparent 22%), linear-gradient(16deg, transparent 38%, rgba(196, 220, 244, 0.6) 39% 45%, transparent 46%) 22% 55%/42% 42% no-repeat, linear-gradient(-16deg, transparent 38%, rgba(196, 220, 244, 0.6) 39% 45%, transparent 46%) 78% 55%/42% 42% no-repeat;
}

.zr-problems__cards {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.zr-problems__card {
  position: absolute;
  left: 50%;
  top: 33%;
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  width: calc(100vw - 40px);
  max-width: 498px;
  -moz-column-gap: 24px;
  column-gap: 24px;
  min-height: 288px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 42px rgba(34, 52, 72, 0.06);
  transform: translate(var(--zr-card-x, -50%), var(--zr-card-y, -50%));
  opacity: var(--zr-card-opacity, 0);
  pointer-events: auto;
  will-change: transform, opacity;
  border: var(--2, 2px) solid var(--secondary-2, #FFF);
  background: var(--white-48, rgba(255, 255, 255, 0.48));
}

.zr-problems__media {
  position: relative;
  min-height: 100%;
  aspect-ratio: 13/24;
  overflow: hidden;
}

.zr-problems__media img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 16px;
}

.zr-problems__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  border: 0;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background: transparent;
}

.zr-problems__play:hover svg path {
  fill-opacity: 1;
}

.zr-problems__body {
  display: flex;
  flex-direction: column;
  padding: 24px 14px 24px 0px;
}

.zr-problems__body .zr-problems__card-title {
  margin: 16px 0 0;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 400;
}

.zr-problems__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
}

.zr-problems__text span {
  font-size: 20px;
  display: block;
  font-weight: 600;
}

.zr-problems__bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
}

.zr-problems__bottom strong {
  display: block;
  font-size: 26px;
  line-height: 1;
  font-weight: 600;
}

.zr-problems__bottom span {
  display: block;
  margin-top: 3px;
  font-size: 16px;
  line-height: 1.5;
}

.zr-problems__avatars {
  display: flex;
  flex: 0 0 auto;
}

.zr-problems__avatars img {
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.zr-problems__avatars img + img {
  margin-left: -20px;
}

.zr-video-popup.zr-video-popup--problems {
  z-index: 2147483647;
  padding: 20px;
  background: rgba(23, 51, 42, 0.78);
  backdrop-filter: blur(5px);
}

.zr-video-popup.zr-video-popup--problems .zr-video-popup__inner {
  width: min(360px, 100vw - 56px);
  max-height: calc(100svh - 96px);
  aspect-ratio: 9/16;
  background: #000;
  border-radius: 8px;
}

.zr-video-popup.zr-video-popup--problems iframe,
.zr-video-popup.zr-video-popup--problems video {
  border-radius: inherit;
  -o-object-fit: contain;
  object-fit: contain;
}

.zr-video-popup.zr-video-popup--problems button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: -12px;
  right: -12px;
  width: 30px;
  height: 30px;
  font-size: 13px;
  line-height: 1;
}

@media (max-width: 760px) {
  .zr-video-popup.zr-video-popup--problems {
    padding: 16px;
  }

  .zr-video-popup.zr-video-popup--problems .zr-video-popup__inner {
    width: min(300px, 100vw - 56px);
    max-height: calc(100svh - 84px);
  }

  .zr-video-popup.zr-video-popup--problems button {
    top: -9px;
    right: -9px;
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .zr-problems {
    padding-top: 60px;
    border-radius: 60px 60px 0 0;
    margin-top: -60px;
    min-height: auto;
  }

  .zr-problems__sticky {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 72px 0 24px;
    overflow: visible;
  }

  .zr-problems__container {
    height: auto;
  }

  .zr-problems__head,
  .zr-problems__model,
  .zr-problems__orbit {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }

  .zr-problems__head {
    width: 100%;
    margin: 0 auto 28px;
  }

  .zr-problems__heading {
    font-size: 30px;
  }

  .zr-problems__title {
    margin-top: 24px;
    font-size: 18px;
  }

  .zr-problems__orbit,
  .zr-problems__model {
    display: none;
  }

  .zr-problems__cards {
    position: relative;
    display: grid;
    gap: 0;
    pointer-events: auto;
  }

  .zr-problems__card {
    position: sticky;
    left: auto;
    top: 86px;
    width: 100%;
    max-width: none;
    margin-bottom: 18px;
    transform: none;
    opacity: 1;
    will-change: transform;
    background-color: #fff;
    box-shadow: unset;
  }

  .zr-problems__card:nth-child(1) {
    top: calc(86px + 0 * 12px);
  }

  .zr-problems__card:nth-child(2) {
    top: calc(86px + 1 * 12px);
  }

  .zr-problems__card:nth-child(3) {
    top: calc(86px + 2 * 12px);
  }

  .zr-problems__card:nth-child(4) {
    top: calc(86px + 3 * 12px);
  }

  .zr-problems__card:nth-child(5) {
    top: calc(86px + 4 * 12px);
  }

  .zr-problems__card:nth-child(6) {
    top: calc(86px + 5 * 12px);
  }

  .zr-problems__card:nth-child(7) {
    top: calc(86px + 6 * 12px);
  }

  .zr-problems__card:nth-child(8) {
    top: calc(86px + 7 * 12px);
  }

  .zr-problems__card:nth-child(9) {
    top: calc(86px + 8 * 12px);
  }

  .zr-problems__card:nth-child(10) {
    top: calc(86px + 9 * 12px);
  }

  .zr-problems__card:nth-child(11) {
    top: calc(86px + 10 * 12px);
  }

  .zr-problems__card:nth-child(12) {
    top: calc(86px + 11 * 12px);
  }

  .zr-problems__media {
    min-height: 240px;
    aspect-ratio: auto;
  }

  .zr-problems__body .zr-problems__card-title {
    font-size: 20px;
  }

  .zr-problems__bottom {
    flex-direction: column;
  }

  .zr-problems__bottom span {
    font-size: 14px;
  }

  .zr-problems__bottom strong {
    font-size: 19px;
  }
}

@media (max-width: 1260px) and (min-width: 761px) {
  .zr-problems {
    padding-top: 90px;
    border-radius: 90px 90px 0 0;
    margin-top: -90px;
  }

  .zr-problems__head {
    top: 90px;
  }

  .zr-problems__sticky {
    padding-top: 0;
    overflow: visible;
  }

  .zr-problems__container {
    display: grid;
    grid-template-columns: minmax(360px, 498px) minmax(300px, 1fr);
    align-items: center;
    gap: 34px;
    max-width: 960px;
    padding: 0 24px;
  }

  .zr-problems__orbit {
    display: none;
  }

  .zr-problems__model {
    left: auto;
    right: 0%;
    width: min(420px, 42vw);
    height: min(560px, 70vh);
    transform: translateY(-50%);
    top: 38%;
  }

  .zr-problems__lottie {
    width: 400px;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-32%);
  }

  .zr-problems__cards {
    inset: 0;
    width: auto;
  }

  .zr-problems__card {
    left: 0;
    transform: translate(var(--zr-card-x, 0), var(--zr-card-y, -50%));
    box-shadow: unset;
    top: 25%;
  }
}