.bd-designs { padding: 70px 20px; background: var(--bd-cream); }
.bd-designs__inner--divider {
  border-top: 2px solid var(--bd-pale);
  padding-top: 40px;
}
.bd-designs--center .bd-designs__inner { text-align: center; }
.bd-designs--center .bd-designs__lede { margin: 18px auto 30px; max-width: 60ch; }
.bd-designs--left .bd-designs__lede { margin: 18px 0 30px; }

.bd-design-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.bd-design {
  aspect-ratio: 1 / 1;
  border: var(--bd-border) solid var(--bd-navy);
  border-radius: 14px;
  background: var(--bd-pale);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 8px;
}
.bd-design img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.bd-design:hover img { animation: bd-wiggle 0.6s ease; }

.bd-designs__note {
  margin: 24px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--bd-navy);
  text-align: center;
}
.bd-designs--left .bd-designs__note { margin-top: 30px; }

@media (max-width: 1080px) {
  .bd-design-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .bd-design-grid { gap: 10px; }
}
@media (max-width: 480px) {
  .bd-design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Mobile swipe layouts ------------------------------------------------ */
.bd-designs__swipe { display: block; }
.bd-designs__progress { display: none; }

@media (max-width: 760px) {
  .bd-designs--m-swipe_2 .bd-design-grid,
  .bd-designs--m-swipe_1 .bd-design-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bd-gutter);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* bleed to the screen edges so the next column peeks in */
    margin-inline: calc(-1 * (var(--bd-gutter) + 20px));
    padding-inline: calc(var(--bd-gutter) + 20px) var(--bd-gutter);
    padding-block: 2px;
  }
  .bd-designs--m-swipe_2 .bd-design-grid::-webkit-scrollbar,
  .bd-designs--m-swipe_1 .bd-design-grid::-webkit-scrollbar { display: none; }
  .bd-designs--m-swipe_2 .bd-design-grid {
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc((100vw - 2 * var(--bd-gutter) - 20px) / 2.4);
  }
  .bd-designs--m-swipe_1 .bd-design-grid {
    grid-template-rows: auto;
    grid-auto-columns: calc((100vw - 2 * var(--bd-gutter) - 10px) / 1.6);
  }
  .bd-designs--m-swipe_2 .bd-design,
  .bd-designs--m-swipe_1 .bd-design { scroll-snap-align: start; }

  .bd-designs--m-swipe_2 .bd-designs__progress,
  .bd-designs--m-swipe_1 .bd-designs__progress {
    display: block;
    position: relative;
    width: 120px;
    height: 6px;
    margin: 20px auto 0;
    border-radius: 999px;
    background: var(--bd-pale);
    border: 2px solid var(--bd-navy);
    box-sizing: content-box;
    overflow: hidden;
  }
  .bd-designs__progress span {
    position: absolute;
    inset-block: 0;
    left: 0;
    border-radius: 999px;
    background: var(--bd-pink);
    transition: transform 0.08s linear;
  }
  .bd-designs__swipe:not([data-scrollable]) .bd-designs__progress { display: none; }
}