.helio-feature-cards{ background:#000; }

.helio-feature-cards.carousel{
  position:relative;
  margin:0 auto;
  padding:20px 0 64px;
  overflow:visible;
}

.helio-feature-cards.carousel .track{
  display:flex;
  gap:20px;
  overflow-x:auto !important;
  scroll-snap-type:x mandatory;
  scroll-padding:0 50%;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab !important;
  user-select:none;
  padding:60px 60px;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  will-change:scroll-position;
  scroll-behavior:auto;
}
.helio-feature-cards.carousel .track::-webkit-scrollbar{ display:none; }
.helio-feature-cards.carousel .track.--dragging,
.helio-feature-cards.carousel .track.--animating{ scroll-snap-type:none; }

.helio-feature-cards.carousel .card{
  flex:0 0 300px;
  max-width:300px;
  border-radius:20px;
  overflow:hidden;
  padding:12px;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  transition:transform .25s ease, box-shadow .25s ease;
  will-change:transform;
  transform:translateZ(0);
  transform-origin:center center;
  backface-visibility:hidden;
  contain:layout paint style;
}

.helio-feature-cards.carousel .card-media{
  display:flex;
  justify-content:center;
  align-items:center;
}
.helio-feature-cards.carousel .card-media img{
  display:block;
  max-width:100%;
  max-height:220px;
  object-fit:contain;
  -webkit-user-drag:none;
}

.helio-feature-cards.carousel .card-body{
  padding:12px 8px 8px;
  text-align:center;
}

.helio-feature-cards.carousel .card-title{
  margin:0 0 8px;
  font-size:clamp(18px,1.6vw,24px);
  font-weight:600;
  color:#8a69d4;
}

.helio-feature-cards.carousel .card-text{
  margin:0;
  line-height:1.45;
  color:#fff;
  font-size:clamp(14px,1.2vw,18px);
}

.helio-feature-cards.carousel .card:hover,
.helio-feature-cards.carousel .card.active{
  transform:scale(1.1) translateY(-10px);
  z-index:5;
  box-shadow:0 12px 30px #8a69d4;
}

.carousel-controls{
  position:absolute;
  left:16px;
  right:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 12px;
  z-index:10;
  pointer-events:none;
}

.carousel-btn{
  width:45px;
  height:45px;
  border-radius:50%;
  border:0;
  background:#000;
  color:#fff;
  font-size:150%;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:0 4px 12px rgba(30,29,165,.35);
  transition:transform .15s ease, opacity .2s ease;
  pointer-events:auto;
}
.carousel-btn.is-disabled{ opacity:.5; }
.carousel-btn.--nudge{ transform:scale(.96); }

@media (max-width:1024px) and (min-width:600px){
  .helio-feature-cards{ padding:22px 0; }
  .helio-feature-cards.carousel .track{
    gap:16px;
    padding:48px 40px;
    scroll-snap-type:x proximity;
  }
  .helio-feature-cards.carousel .card{ flex:0 0 240px; max-width:240px; }
  .helio-feature-cards.carousel .card-media img{ max-height:200px; }
  .carousel-controls{ left:12px; right:12px; padding:0 8px; }
  .carousel-btn{ width:44px; height:44px; font-size:140%; }
}

@media (max-width:599px){
  .helio-feature-cards{ padding:22px 0; }
  .helio-feature-cards.carousel .track{
    gap:14px;
    padding:36px 24px;
    scroll-snap-type:x proximity;
  }
  .helio-feature-cards.carousel .card{
    flex:0 0 200px;
    max-width:200px;
    margin:0 auto;
  }
  .helio-feature-cards.carousel .card:hover,
  .helio-feature-cards.carousel .card.active{ transform:scale(1.05) translateY(-6px); }
  .helio-feature-cards.carousel .card-media img{ max-height:160px; }
  .carousel-controls{ left:8px; right:8px; padding:0 6px; }
  .carousel-btn{ width:40px; height:40px; font-size:130%; }
}

.helio-feature-heading{
  text-align:center;
  font-size:clamp(20px,2.5vw,34px);
  margin:24px 0;
  color:#8a69d4;
}