.characteristic-image-with-text-section {
  word-break: break-word;
  background-color: rgb(var(--color-background));
  display: flex;
  justify-content: center;
  align-items: center;
}
.characteristic-image-with-text-section > .page-width {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.characteristic-image-with-text-section > div,
.characteristic-image-with-text-section > div > div {
  width: 100%;
}
.characteristic-image-with-text__image {
  position: relative;
  display: flex;
  height: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  aspect-ratio: var(--aspect-ratio);
}
.characteristic-image-with-text__image
.vis-preview-icon.right {
  max-width: 80%;
}
.characteristic-image-with-text__image:first-child {
  grid-column: 1;
  grid-row: 1 / 3;
  height: 100%;
}
.characteristic-image-with-text__image > img {
  max-width: 100%;
  height: 100%;
  aspect-ratio: var(--aspect-ratio);
  object-fit: var(--fit-type);
  border-radius: var(--border-radius);
}

.characteristic-image-with-text__image .hover-scale__image {
  width: 100%;
}
.characteristic-image-with-text__image .empty-image-class {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-image-background));
}
.characteristic-image-with-text__subheading {
  font-size: var(--body3-font-size);
  text-transform: uppercase;
  letter-spacing: 0.3em;
}
.characteristic-image-with-text__button {
  max-width: 100%;
  padding-block-start: 0;
}
.characteristic-image-with-text__button .button {
  word-break: break-all;
  white-space: normal;
}
.characteristic-image-with-text__group {
  width: 432px;
}
.characteristic-image-with-text__group
  .characteristic-image-with-text__rich-text {
  font-size: 20px;
}
.characteristic-image-with-text__group
  .characteristic-image-with-text__heading {
  font-weight: 400;
}

.characteristic-image-with-text-section-top {
  width: 100%;
}
.characteristic-image-with-text-section-top
  .characteristic-image-with-text__image {
  flex: 1;
  max-width: 1058px;
}

/* 所有图片的基础样式 */
.characteristic-image-with-text-section-top
  .characteristic-image-with-text__image
  img {
  width: 100%;
  height: 100%;
  object-fit: var(--fit-type);
}

.characteristic-image-with-text__image-group {
  flex: 1;
  display: grid;
  gap: 20px;
  /* 定义网格模板区域 */
  grid-template-areas:
    "cabinet sofa"
    "chair sofa";
  /* 三列布局，左侧固定宽度 */
  grid-template-columns: 1fr 1.5fr;
  /* 两行，第一行自适应，第二行固定高度 */
  grid-template-rows: 1fr 6.25fr 9fr;
}
.characteristic-image-with-text__image-group
  .characteristic-image-with-text__image:nth-child(1) {
  grid-area: cabinet; /* 占据左上角区域 */
  grid-row-start: 1;
  grid-row-end: 3;
}
.characteristic-image-with-text__image-group
  .characteristic-image-with-text__image:nth-child(2) {
  grid-area: sofa; /* 占据右上角区域 */
  grid-row-start: 2;
  grid-row-end: 4;
}
.characteristic-image-with-text__image-group
  .characteristic-image-with-text__image:nth-child(3) {
  grid-area: chair; /* 占据右上角区域 */
  aspect-ratio: 340/480;
  grid-row-start: 3;
  grid-row-end: 4;
}
.characteristic-image-with-text__image-group
  .characteristic-image-with-text__image {
  width: 100%;
  height: 100%;
}
/* 所有图片的基础样式 */
.characteristic-image-with-text__image-group
  .characteristic-image-with-text__image
  img {
  width: 100%;
  height: 100%;
  object-fit: var(--fit-type);
}

@media (max-width: 959px) {
  .characteristic-image-with-text-section > .page-width {
    gap: 30px;
  }
  .characteristic-image-with-text-section-top .page-width {
    gap: 12px;
    flex-direction: column;
  }
  .characteristic-image-with-text-section-bottom .page-width {
    gap: 12px;
    flex-direction: column-reverse;
  }
  .characteristic-image-with-text__group {
    width: 100% !important;
  }
  .characteristic-image-with-text-section-top
    .characteristic-image-with-text__image {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 711/360;
  }
  /* .characteristic-image-with-text-section-top
    .characteristic-image-with-text__group
    .characteristic-image-with-text__heading,
  .characteristic-image-with-text__group
    .characteristic-image-with-text__heading {
    font-size: 30px;
  } */
  .characteristic-image-with-text-section-top
    .characteristic-image-with-text__group
    .characteristic-image-with-text__rich-text,
  .characteristic-image-with-text__group
    .characteristic-image-with-text__rich-text {
    font-size: 14px;
  }

  
  .characteristic-image-with-text-section-top,
  .characteristic-image-with-text-section-bottom {
    flex-direction: column;
  }

  .characteristic-image-with-text-section-bottom  .characteristic-image-with-text__image-group {
    display: grid;
    gap: 10px;
    grid-template-areas:
      "cabinet sofa"
      "chair sofa";
    /* 三列布局，左侧固定宽度 */
    grid-template-columns: 1.78fr 1fr;
    /* 两行，第一行自适应，第二行固定高度 */
    grid-template-rows: 1fr 2fr;
    order: 1;
  }
  .characteristic-image-with-text-section-bottom .characteristic-image-with-text__group {
    order: 2;
  }
  .characteristic-image-with-text__image-group
    .characteristic-image-with-text__image:nth-child(1) {
    grid-area: sofa; /* 占据左上角区域 */
    aspect-ratio: 450/400;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
    order: 0;
  }
  .characteristic-image-with-text__image-group
    .characteristic-image-with-text__image:nth-child(2) {
    grid-area: cabinet; /* 占据右上角区域 */
    aspect-ratio: 252/130;
    order: 1;
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .characteristic-image-with-text__image-group
    .characteristic-image-with-text__image:nth-child(3) {
    grid-area: chair; /* 占据右上角区域 */
    aspect-ratio: 250/260;
    order: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
  }

}

.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}

.full-width .characteristic-image-with-text__group{
  width: 100%;
}