.qd-image-gallery-group__block {
  --section-mobile-padding: 20px;
  --card-group-padding: 0px;
  --card-group-gap: 10px;
  background-color: rgb(var(--color-background));
}

.qd-image-gallery-group__block {
  position: relative;
  inset-inline-start: calc(var(--card-group-padding) * -1);
  width: calc(100% + var(--card-group-padding) * 2);
  margin-inline-end: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--card-group-padding);
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.qd-image-gallery-group__block .qd-image-gallery__card img,
.qd-image-gallery-group__block .qd-image-gallery__card svg {
  aspect-ratio: var(--qd-image-gallery-image-ratio);
}

.qd-image-gallery-group__content {
  grid-template-columns: repeat(
      min(var(--mobile-columns), var(--m-card-count)),
      minmax(0, calc((100% - (min(var(--mobile-columns), var(--m-card-count)) - 1) * var(--card-group-gap)) / min(var(--mobile-columns), var(--m-card-count))))
    );
  display: grid;
  gap: 20px var(--qd-image-gallery-image-gap-mobile);
  margin: 0 var(--card-group-padding);
  grid-auto-flow: row;
}


.qd-image-gallery__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: var(--card-group-content-align);
}

.qd-image-gallery__card .qd-text:first-of-type{
  margin-top:4px;
}

/* Tablet - 768px ~ 991px */
@media (min-width: 768px) {

  .qd-image-gallery__card {
    gap: 12px;
  }

  .qd-image-gallery-group__content {
    grid-template-columns: repeat(
      min(var(--pad-columns), var(--card-count)),
      minmax(0, calc((100% - (min(var(--pad-columns), var(--card-count)) - 1) * var(--card-group-gap)) / min(var(--pad-columns), var(--card-count))))
    );
    grid-auto-flow: row;
    gap: 40px var(--qd-image-gallery-image-gap-pad);
    padding: 0;
    transform: none;
  }

}

/* PC - 992px及以上 */
@media (min-width: 992px) {
  .qd-image-gallery__card {
    gap: 16px;
  }

  /* .qd-image-gallery__card .qd-text:first-of-type{
    margin-top:4px;
  } */

  .qd-image-gallery-group__block{
    width:100%;
    inset-inline-start: auto;
    margin: 0 auto;
  }

  .qd-image-gallery-group__content {
    grid-template-columns: repeat(
      min(var(--desktop-columns), var(--pc-card-count)),
      minmax(0, calc((100% - (min(var(--desktop-columns), var(--pc-card-count)) - 1) * var(--card-group-gap)) / min(var(--desktop-columns), var(--pc-card-count))))
    );
    grid-auto-flow: row;
    gap: var(--qd-image-gallery-image-gap-pc) var(--qd-image-gallery-image-gap-pc);
    padding: 10px 0;
    transform: none;
  }
}