.section:not(.xxxl-spacing-static, .xxl-spacing-static, .xl-spacing-static, .xxxl-spacing, .xxl-spacing, .xl-spacing,
  .l-spacing, .m-spacing, .s-spacing, .xs-spacing, .xxs-spacing):not(:first-of-type) .how-to-cards:first-child {
  padding-top: 60px;
}

.how-to-cards {
  /* local design tokens for this block */
  --radius-pill: 50px;
  --status-dot-size: 6px;
  --status-curr-width: 30px;
  --block-padding: var(--spacing-600);
  --side-padding: 20px;
  padding: var(--block-padding) 0px var(--block-padding) 0px;
}

.how-to-cards:has(.gallery-control.hide) {
  padding: var(--block-padding)  var(--side-padding) var(--block-padding) 0px;
}

.how-to-cards:has(.gallery-control.hide) .cards-container {
  overflow: hidden;
}

.how-to-cards h3 {
  font-size: var(--heading-font-size-s);
  text-align: left;
  line-height: 26px;
  margin-top: 0;
}

.how-to-cards .text {
  padding: 0 var(--side-padding);
}

.how-to-cards .text h2 {
  text-align: left;
  font-size: var(--heading-font-size-m);
}

.how-to-cards .text p {
  text-align: left;
  margin: 0;
  padding: var(--spacing-100) 0 var(--spacing-500) 0;
  font-size: var(--body-font-size-l);

}


.how-to-cards .card {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: var(--spacing-400);
  border-radius: 12px;
  background-color: var(--color-gray-150);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300);
}

.how-to-cards .cards-container {
  padding-left: var(--side-padding);
}

.how-to-cards .card:last-child {
  margin-right: calc(2 * var(--side-padding));
}

.how-to-cards .card p {
  font-size: var(--body-font-size-s);
  text-align: left;
  margin: 0px;
}

.how-to-cards .number {
  position: relative;
  font-weight: 700;
  border-radius: 50%;
  background-color: var(--color-white);
  width: 34px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.how-to-cards .number-txt {
  z-index: 1;
}

.how-to-cards .number-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  transition: height .5s cubic-bezier(0.19, 1, 0.22, 1);
  background-color: var(--color-black);
}

.how-to-cards .card:hover,
.how-to-cards .card:focus {
  background-color: var(--color-gray-200);
  transition: background-color .5s cubic-bezier(0.19, 1, 0.22, 1);
}

.how-to-cards .card:not(:hover) {
  transition: background-color .2s cubic-bezier(0.19, 1, 0.22, 1);
}

.how-to-cards .card:hover .number-bg,
.how-to-cards .card:focus .number-bg {
  height: 100%;
  transition: height .5s cubic-bezier(0.19, 1, 0.22, 1);
}

.how-to-cards .card:not(:hover) .number-bg {
  transition: height .2s cubic-bezier(0.19, 1, 0.22, 1);
}

.how-to-cards .card:hover .number-txt,
.how-to-cards .card:focus .number-txt {
  color: white;
  transition: color .1s linear;
}

@media (min-width: 480px) {
  .how-to-cards .card {
    width: 322px;
  }
}

@media (min-width: 768px) {
  .how-to-cards {
    max-width: var(--block-wd-max-width);
    box-sizing: border-box;
    --block-padding: var(--spacing-900);
    --side-padding: var(--spacing-500);
  }

  .how-to-cards.cards-count-4 .cards-container ,
  .how-to-cards.cards-count-5 .cards-container ,
  .how-to-cards.cards-count-6 .cards-container {
    width: 100vw;
  }
}

@media (min-width: 1280px) {
  .how-to-cards{
    --side-padding: var(--spacing-600);
  }
}

@media (min-width: 1440px) {
  .how-to-cards {
    max-width: var(--block-wd-grid-max-width);
    margin: auto;
    box-sizing: border-box;
  }

  .how-to-cards.cards-count-4 .card {
    width: calc((100% - var(--spacing-700)) / 4);
  }

  .how-to-cards .cards-container {
    width: 100vw; 
  }
  .how-to-cards.cards-count-3 .cards-container,
  .how-to-cards.cards-count-4 .cards-container {
    width: unset
  }
}

@media (min-width: 1680px) {
  .how-to-cards {
    margin: auto;
    max-width: 1680px;
  }

  .how-to-cards .card {
    width: 382px;
  }

  .how-to-cards.cards-count-6 .card,
  .how-to-cards.cards-count-5 .card {
    width: 301px;
  }

  .how-to-cards.cards-count-6 .cards-container {
    width: 100vw; 
  }
}


/* Desktop: when exactly 3 cards, make each take 1/3 of container */
@media (min-width: 900px) {
  .how-to-cards.cards-count-3 .card {
    width: calc((100% - var(--spacing-500)) / 3);
  }
}

.gallery {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-300);
  overflow-x: scroll;
  scrollbar-width: none;
  /* scroll-snap-type: x mandatory; */
  scroll-behavior: smooth;
  padding: 0;
  margin: 0;
  scroll-padding: 0 var(--spacing-300);
}

.gallery::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 0;
  height: 0;
}

.gallery.center.gallery--all-displayed {
  justify-content: center;
}

.gallery--item {
  scroll-snap-align: start;
  width: calc(100% - var(--spacing-300));
}

.gallery-control {
  padding: var(--spacing-300) var(--spacing-300) 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-100);
  align-items: center;
}

.gallery-control.hide,
.gallery-control .hide {
  display: none;
}

.gallery-control.loading {
  visibility: hidden;
}

.gallery-control button {
  all: unset;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  box-shadow: 0px 2px 8px 0px #00000029;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
}

.gallery-control button:focus {
  outline: revert;
}

.gallery-control button:hover:not(:disabled) {
  background-color: var(--color-gray-300);
}

.gallery-control button:disabled {
  cursor: auto;
}

.gallery-control button .chevron-icon {
  width: 1.25rem;
  height: 1.25rem;
  transform-origin: center;
  display: block;
}

.gallery-control button.prev .chevron-icon {
  transform: rotate(-90deg) translate(0px, -1px);
}

.gallery-control button.next .chevron-icon {
  transform:rotate(90deg) translate(0px, -1px);
}

.gallery-control button:disabled .chevron-icon {
  opacity: 0.35;
}

.gallery-control .status {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--color-white);
  box-shadow: 0px 2px 8px 0px #00000029;
  padding: var(--spacing-100) var(--spacing-300);
  border-radius: var(--radius-pill);
  height: var(--spacing-500);
  box-sizing: border-box;
}

.gallery-control .status .dot {
  border-radius: 50px;
  width: var(--status-dot-size);
  height: var(--status-dot-size);
  background-color: var(--color-gray-600);
}

.gallery-control .status .dot.curr {
  width: var(--status-curr-width);
  background-color: var(--color-black);
}