/* Why It Works — mobile swipe cards */
.cp-problem-mobile-track {
  display: contents;
}

.cp-problem-mobile-scrollbar {
  display: none;
}

@media (max-width: 575.98px) {
  .cp-why-columns {
    display: block;
    margin-right: 0;
    margin-left: 0;
  }

  .cp-problem-mobile-track {
    display: flex;
    width: calc(100% + 30px);
    margin-left: -15px;
    padding: 0 15px 10px;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 15px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .cp-problem-mobile-track::-webkit-scrollbar {
    display: none;
  }

  .cp-problem-mobile-track .cp-problem-card-col {
    flex: 0 0 calc(100% - 26px);
    width: calc(100% - 26px);
    max-width: none;
    padding-right: 0;
    padding-left: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .cp-problem-mobile-track .cp-problem-card {
    height: 100%;
    min-height: 390px;
    margin: 0;
  }

  .cp-problem-mobile-scrollbar {
    position: relative;
    display: block;
    width: min(210px, 62vw);
    height: 4px;
    margin: 14px auto 42px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.16) 50%,
      rgba(255, 255, 255, 0.035)
    );
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.24);
  }

  .cp-problem-mobile-scrollbar-thumb {
    width: 50%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #d82f50 0%, #ff5568 100%);
    box-shadow: 0 0 14px rgba(216, 47, 80, 0.38);
    transform: translate3d(0, 0, 0);
    transition: transform 80ms linear;
    will-change: transform;
  }
}