.qdimage .button {
  word-break: break-word;
  white-space: normal;
}
.qdimage .carousel__track {
  aspect-ratio: var(--desktop-aspect-ratio);
  overflow-y: hidden;
}

.qdimage__image {
  display: block;
  position: relative;
  width: var(--qdimage-image-width);
  height: var(--qdimage-image-height);
  overflow: hidden;
}
.qdimage__image--mobile,
.qdimage__image--desktop {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.qdimage__image--mobile img,
.qdimage__image--mobile svg,
.qdimage__image--desktop img,
.qdimage__image--desktop svg {
  display: block;
  /* width: 100%;
  height: 100%; */
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: var(--image-aspect-ratio);
}
.qdimage__image--mobile svg,
.qdimage__image--desktop svg {
  background-color: rgb(var(--color-image-background))
}
.qdimage__image--mobile {
  display: block;
}
.qdimage__image--desktop {
  display: none;
}

.qdimage__image-mask {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: rgba(
        0,
        0,
        0,
        calc(var(--qdimage-image-mask-opacity) / 100)
  );
  transform: translate(-50%, -50%);
}

.qdimage__float-group {
  position: absolute;
  z-index: 3;
  display: grid;
}
/*浮层横向布局*/
.qdimage__float-group[data-row-position="left"] {
  left: 0;
}
.qdimage__float-group[data-row-position="center"] {
  left: 50%;
  transform: translateX(-50%);
}
.qdimage__float-group[data-row-position="right"] {
  right: 0;
}
/*浮层竖向布局*/
.qdimage__float-group[data-column-position="top"] {
  top: 0;
}
.qdimage__float-group[data-column-position="center"] {
  top: 50%;
  transform: translateY(-50%);
}
.qdimage__float-group[data-column-position="center"][data-row-position="center"] {
  transform: translateX(-50%) translateY(-50%);
}
.qdimage__float-group[data-column-position="bottom"] {
  bottom: 0;
}
.qdimage__image-text-mask {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: block;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}
.qdimage__image-text-mask-deep {
  background: radial-gradient(
        77.64% 77.64% at 50% 50%,
        rgb(0 0 0 / 30%) 59.64%,
        rgb(0 0 0 / 0%) 100%
  );
  filter: blur(120px);
  border-radius: 50%;
}
.qdimage__image-text-mask-light {
  background: radial-gradient(
        77.64% 77.64% at 50% 50%,
        rgb(255 255 255 / 30%) 59.64%,
        rgb(255 255 255 / 0%) 100%
  );
  filter: blur(120px);
  border-radius: 50%;
}

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

/* PC - 992px及以上 */
@media (min-width: 992px) {
  .qdimage__image--mobile {
    display: none;
  }

  .qdimage__image--desktop {
    display: block;
  }
}