.block--cards {
  --block-cards-wrapper-bullet: transparent;
  --block-cards-wrapper-bullet-active: currentColor;
  --block-cards-wrapper-bullet-border: currentColor;
  --block-cards-wrapper-bullet-size: 12px;
  --block-cards-wrapper-bullet-spacing: 1rem;
  --block-cards-card-gap: var(--wp--preset--spacing--40, var(--wp--style--block-gap));
}

@media (max-width: 991.98px) {
  .block--cards {
    --card-count: 2.25 !important;
    margin-left: calc((100vw - 100%) / -2);
    margin-right: calc((100vw - 100%) / -2);
  }
}
@media (max-width: 767.98px) {
  .block--cards {
    --card-count: 1.25 !important;
  }
}
.block--cards .cards {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--block-cards-card-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.block--cards .cards::before, .block--cards .cards::after {
  content: "";
  position: relative;
  display: block;
  flex: 1 0 calc((100% - (var(--card-count) - 1) * var(--block-cards-card-gap)) / var(--card-count) * 0.125 - var(--block-cards-card-gap) / 1.25);
  pointer-events: none;
}

@media (min-width: 768px) {
  .block--cards .cards::before, .block--cards .cards::after {
    flex: 1 0 calc((100% - (var(--card-count) - 1) * var(--block-cards-card-gap)) / var(--card-count) * 0.625 - var(--block-cards-card-gap) / 2.25);
  }
}
@media (min-width: 992px) {
  .block--cards .cards::before, .block--cards .cards::after {
    display: none;
  }
}
.block--cards .cards::-webkit-scrollbar {
  display: none;
}

.block--cards .scroll-track {
  position: relative;
  width: calc((100% - (var(--card-count) - 1) * var(--block-cards-card-gap)) / var(--card-count));
  height: 3px;
  margin: var(--wp--style--block-gap) auto 0;
  background-color: var(--wp--preset--color--black-800);
  border-radius: 0;
}

.block--cards .scroll-track .scroll-thumb {
  width: 0;
  height: 100%;
  background-color: var(--wp--preset--color--gold-800);
  border-radius: 0;
  transform: translateX(0px);
  will-change: transform, width;
}

.editor-styles-wrapper .block--cards .cards {
  display: block;
}

.editor-styles-wrapper .block--cards .cards > .acf-innerblocks-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--block-cards-card-gap);
}