/* Card Slider */
:where(.card-slider) {
  --button-size: clamp(2.97rem, 2.8386246418rem + 0.3342884432vw, 3.32rem);
  --padding-inline: var(--padding-section-inline);
  /*--color-cards-background: darkgray;
  --color-cards-items: white;
  --text-color: var(--color-cards-items);*/
  color: var(--text-color);
}
@media screen and (min-width: 1440px) {
  :where(.card-slider) {
    --button-size: clamp(3.32rem, 3.0242857143rem + 0.2053571429vw, 3.55rem);
  }
}
.card-slider__cards-container {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 1em;
  cursor: grab;
  padding-block: 0.5em;
  padding-inline: var(--padding-inline);
  scroll-padding-inline: var(--padding-inline);
  left: 50%;
  position: relative;
  transform: translateX(-50%);
  width: var(--body-width);
}
@media (pointer: coarse) and (hover: none) {
  .card-slider__cards-container {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }
}
:where(.card-slider__cards-container.dragging) {
  cursor: grabbing;
  user-select: none;
}
:where(.card-slider__controls-wrapper) {
  margin-left: auto;
  width: fit-content;
  margin-top: calc(0.25 * var(--button-size) + 2 * var(--rs-0-1-1));
}
:where(.card-slider__controls-wrapper):not(:has(> *:not(:disabled))) {
  display: none;
}
:where(.card-slider__control-button) {
  background-color: unset;
  border: unset;
  padding: unset;
  width: var(--button-size);
  height: var(--button-size);
  border-radius: 50%;
  cursor: pointer;
  transition: scale 0.2s ease-in-out;
}
:where(.card-slider__control-button):focus-visible {
  outline: 2px solid var(--text-color, currentColor);
  outline-offset: 0.3em;
}
:where(.card-slider__control-button):is(:hover, :focus):not(:disabled) {
  scale: 1.05;
}
:where(.card-slider__control-button):disabled {
  opacity: 0.2;
  cursor: not-allowed;
}
:where(.card-slider__control-button) svg {
  width: 100%;
  height: 100%;
  --button-color: var(--text-color);
}

/* Cards */
:where(.card-slider__card) {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

:where(.card-slider__card):focus-visible {
  outline: 2px solid var(--text-color, currentColor);
  outline-offset: 0.3em;
}