.ds24-section--custom-code .examples {
  gap: var(--pw-examples-gap);
  padding-block: var(--pw-examples-pad-top) var(--pw-examples-pad-bottom);
  flex-direction: column;
  display: flex;
  overflow: clip;
}

.ds24-section--custom-code .examples__content {
  gap: var(--pw-examples-text-gap);
  padding-inline: var(--pw-pad-inline);
  flex-direction: column;
  display: flex;
}

.ds24-section--custom-code .examples__head {
  gap: var(--pw-examples-head-gap);
  flex-direction: column;
  display: flex;
}

.ds24-section--custom-code .examples__eyebrow {
  font-size: var(--pw-type-eyebrow-size);
  font-weight: var(--pw-font-medium);
  line-height: var(--pw-lh-normal);
  letter-spacing: var(--pw-ls-eyebrow);
  color: var(--pw-color-squant);
}

.ds24-section--custom-code .examples__title {
  font-size: var(--pw-type-h2-size);
  font-weight: var(--pw-font-bold);
  line-height: var(--pw-lh-heading);
  letter-spacing: var(--pw-ls-heading);
  color: var(--pw-color-black);
  text-wrap: var(--pw-examples-title-wrap);
}

.ds24-section--custom-code .examples__lead {
  font-size: var(--pw-type-examples-lead-size);
  font-weight: var(--pw-font-regular);
  line-height: var(--pw-lh-tight);
  color: var(--pw-color-black);
  text-wrap: var(--pw-examples-lead-wrap);
}

.ds24-section--custom-code .examples__slide {
  gap: var(--pw-examples-rows-gap);
  flex-direction: column;
  display: flex;
  overflow: clip;
}

.ds24-section--custom-code .examples__row {
  justify-content: center;
  display: flex;
  overflow: clip;
}

.ds24-section--custom-code .examples__track {
  flex: none;
  width: max-content;
  display: flex;
}

.ds24-section--custom-code .examples__set {
  gap: var(--pw-examples-card-gap);
  flex: none;
  display: flex;
}

.ds24-section--custom-code .examples__card {
  width: var(--pw-examples-card-w);
  aspect-ratio: var(--pw-examples-card-ratio);
  border-radius: var(--pw-radius-example);
  flex: none;
  overflow: hidden;
}

.ds24-section--custom-code .examples__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.ds24-section--custom-code .examples--ready .examples__row {
  justify-content: flex-start;
}

.ds24-section--custom-code .examples--ready .examples__set {
  gap: var(--pw-examples-card-gap-loop);
  padding-inline-end: var(--pw-examples-card-gap-loop);
}

.ds24-section--custom-code .examples--ready .examples__card {
  width: var(--pw-examples-card-w-loop);
}

.ds24-section--custom-code .examples--ready .examples__track {
  animation: examples-marquee var(--examples-duration) linear infinite;
  will-change: transform;
}

.ds24-section--custom-code .examples--ready .examples__row--right .examples__track {
  animation-direction: reverse;
}

.ds24-section--custom-code .examples--offscreen .examples__track {
  animation-play-state: paused;
}

@media (hover: hover) {
  .ds24-section--custom-code .examples__slide:hover .examples__track {
    animation-play-state: paused;
  }
}

@keyframes examples-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% / var(--examples-copies)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds24-section--custom-code .examples__row, .ds24-section--custom-code .examples--ready .examples__row {
    justify-content: center;
  }

  .ds24-section--custom-code .examples__track, .ds24-section--custom-code .examples--ready .examples__track {
    animation: none;
    transform: none;
  }

  .ds24-section--custom-code .examples__set, .ds24-section--custom-code .examples--ready .examples__set {
    gap: var(--pw-examples-card-gap);
    padding-inline-end: 0;
  }

  .ds24-section--custom-code .examples--ready .examples__card {
    width: var(--pw-examples-card-w);
  }

  .ds24-section--custom-code .examples__set[data-clone] {
    display: none;
  }
}