.plans-carousel-shell{container-type:inline-size;width:100%}
.plans-carousel-shell .plans-grid.is-carousel{
  --gap:24px;--edge:28px;
  --card:min(300px,calc((100cqw - 2*56px - 2*var(--edge) - 2*var(--gap)) / 3));
  --gw:calc(3*var(--card) + 2*var(--gap) + 2*var(--edge));
  width:var(--gw);max-width:100%;margin-inline:auto;
  gap:var(--gap);
  padding:32px calc((var(--gw) - var(--card)) / 2);
  scroll-padding-inline:calc((var(--gw) - var(--card)) / 2);
  scroll-snap-type:x mandatory;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--edge),#000 calc(100% - var(--edge)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--edge),#000 calc(100% - var(--edge)),transparent 100%);
}
.plans-carousel-shell .plans-grid.is-carousel .plan{flex:0 0 var(--card);scroll-snap-align:center;scroll-snap-stop:always}
.plans-carousel-shell .plans-carousel-arrow{
  --gw:calc(3*min(300px,calc((100cqw - 2*56px - 2*28px - 2*24px) / 3)) + 2*24px + 2*28px);
}
.plans-carousel-shell .plans-carousel-prev{left:calc(50% - var(--gw) / 2 - 52px);right:auto}
.plans-carousel-shell .plans-carousel-next{right:calc(50% - var(--gw) / 2 - 52px);left:auto}

@container (max-width: 860px){
  .plans-carousel-shell .plans-grid.is-carousel{
    --gap:16px;--edge:18px;
    --card:min(320px,calc(100cqw - 2*var(--edge) - 2*var(--gap)));
    --gw:100cqw;width:100%;
    padding:28px calc((100cqw - var(--card)) / 2) 76px;
    scroll-padding-inline:calc((100cqw - var(--card)) / 2);
  }
  .plans-carousel-shell .plans-carousel-arrow{top:auto;bottom:16px;transform:none}
  .plans-carousel-shell .plans-carousel-prev{left:calc(50% - 46px);right:auto}
  .plans-carousel-shell .plans-carousel-next{right:calc(50% - 46px);left:auto}
}