* {
  box-sizing: border-box; 
}
.card-scroller {
  position: relative;
  --_card-scroller-gap: 4cqi;
  --_card-inline-size: clamp(200px, 80svb, 84cqi);
}
.card-scroller__title {
  text-align: center;
  max-inline-size: var(--max-content-var, var(--max-content));
}
.card-scroller__cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content;
  /*grid-auto-columns: clamp(calc(75% + var(--_card-scroller-gap)), 25vi, calc(90% - var(--_card-scroller-gap)));*/
  gap: var(--_card-scroller-gap);
  overscroll-behavior-inline: contain;
  overflow-inline: auto;
  /*scroll-padding: 0 calc(var(--_dnmc-nln) + var(--sf-rght)) 0 calc(var(--_dnmc-nln) + var(--sf-lft));*/
  padding-block: var(--margin-block-tertiary);
  
  
  padding-inline: calc(50% - min(var(--_card-inline-size), 100%) / 2);
  margin: 0;
  scroll-snap-type: inline mandatory;
  list-style: none;
  scrollbar-width: thin;
/*      -webkit-mask-image: linear-gradient(180deg,#000 0 calc(100% - 3rem),transparent);
    mask-image: linear-gradient(180deg,#000 0 calc(100% - 3rem),transparent);*/
}
.card-scroller::before,
.card-scroller::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inline-size: var(--_card-scroller-gap);
  z-index: 1;
  background: linear-gradient(var(--_card-shadow, 0), #F6F9FC, transparent);
}
.card-scroller::before {
  inset-inline-start: 0;
  --_card-shadow: 90deg;
}
.card-scroller::after {
  inset-inline-end: 0;
  --_card-shadow: 270deg;
}
@supports not (overflow-inline: auto) {
  .card-scroller__cards {
    overflow-x: auto
  }
}
.card-scroller__card {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  overflow: hidden;
  box-shadow: inset 1px 2px oklch(100% 0 0 / .25), var(--box-shadow-primary);
  border-radius: var(--border-radius-primary);
  touch-action: manipulation;
  background-color: oklch(0% 0 0 / .05);
}
.card-scroller__text {
   padding: var(--margin-block-tertiary);
}
.card-scroller__text-title {
   margin: 0;
}
.card-scroller__text-description {
   margin: 0;
}
.card-scroller__element {
  inline-size: var(--_card-inline-size);
  /*max-inline-size: clamp(calc(75% + var(--_card-scroller-gap)), 25vi, calc(90% - var(--_card-scroller-gap)));*/
  
}
.card-scroller__element--video {
  aspect-ratio: 16/9;
}
.card-scroller__element--img {
  aspect-ratio: 4/3;
}