.characteristic-block-collection-list {
  display: grid;
  width: 100%;
  gap: 20px;
  padding-bottom: 40px;
}
@media (max-width: 959px) {
  .characteristic-block-collection-list {
    padding-bottom: 20px;
  }
}

/* 三张布局 */
.characteristic-block-collection-list.list-column-3 {
  /* 定义网格模板区域 */
  grid-template-areas:
    "cabinet sofa"
    "cabinet tv";
  /* 三列布局，左侧固定宽度 */
  grid-template-columns: 1fr 2fr;
  /* 两行，第一行自适应，第二行固定高度 */
  grid-template-rows: 1fr 1fr;
  align-items: stretch;
  justify-items: stretch;
}

/* 四张布局 */
.characteristic-block-collection-list.list-column-4 {
  /* 定义网格模板区域 */
  grid-template-areas:
    "cabinet bed sofa"
    "cabinet tv tv";
  /* 三列布局，左侧固定宽度 */
  grid-template-columns: 1.3fr 1fr 1.6fr;
  /* 两行，第一行自适应，第二行固定高度 */
  grid-template-rows: 1fr 1fr;
  align-items: stretch;
  justify-items: stretch;
}

/* 五张布局 */
.characteristic-block-collection-list.list-column-5 {
  /* 定义网格模板区域 */
  grid-template-areas:
    "cabinet bed sofa"
    "cabinet tv chair";
  /* 三列布局，左侧固定宽度 */
  grid-template-columns: 2.4fr 1.9fr 1fr 1.9fr;
  /* 两行，第一行自适应，第二行固定高度 */
  grid-template-rows: 1fr 1fr;
  align-items: stretch;
  justify-items: stretch;
}

/* 左侧大图 */
.characteristic-block-collection-list.list-column-3
  .characteristic-block-collection-list__item:nth-child(1) {
  grid-area: cabinet;
  aspect-ratio: 593/824;
}
.characteristic-block-collection-list.list-column-4
  .characteristic-block-collection-list__item:nth-child(1) {
  grid-area: cabinet;
  aspect-ratio: 593/830;
}
.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(1) {
  grid-area: cabinet;
  aspect-ratio: 593/846;
}

.characteristic-block-collection-list.list-column-2
  .characteristic-block-collection-list__item
  .characteristic-block-collection-card__title,
.characteristic-block-collection-list__item:nth-child(1)
  .characteristic-block-collection-card__title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

/* 三张布局 - 右上第一张 */
.characteristic-block-collection-list.list-column-3
  .characteristic-block-collection-list__item:nth-child(2) {
  grid-area: sofa;
  aspect-ratio: 1186/390;
}
.characteristic-block-collection-list.list-column-3
  .characteristic-block-collection-list__item:nth-child(2)
  .characteristic-block-collection-card__title {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.characteristic-block-collection-list.list-column-3
  .characteristic-block-collection-list__item:nth-child(3) {
  grid-area: tv;
  aspect-ratio: 1186/400;
}

.characteristic-block-collection-list.list-column-3
  .characteristic-block-collection-list__item:nth-child(3)
  .characteristic-block-collection-card__title,
.characteristic-block-collection-list.list-column-4
  .characteristic-block-collection-list__item:nth-child(4)
  .characteristic-block-collection-card__title {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.characteristic-block-collection-list.list-column-4
  .characteristic-block-collection-list__item:nth-child(2)
  .characteristic-block-collection-card__title,
.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(2)
  .characteristic-block-collection-card__title,
.characteristic-block-collection-list.list-column-4
  .characteristic-block-collection-list__item:nth-child(3)
  .characteristic-block-collection-card__title,
.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(3)
  .characteristic-block-collection-card__title,
.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(4)
  .characteristic-block-collection-card__title,
.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(5)
  .characteristic-block-collection-card__title {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(4)
  .characteristic-block-collection-card__title {
  right: 0;
}

/* 四张布局、五张布局 - 右上第一张 */
.characteristic-block-collection-list.list-column-4
  .characteristic-block-collection-list__item:nth-child(2),
.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(2) {
  grid-area: bed;
  aspect-ratio: 460/400;
}

/* 四张布局、五张布局 - 右上第二张 */
.characteristic-block-collection-list.list-column-4
  .characteristic-block-collection-list__item:nth-child(3) {
  grid-area: sofa;
  aspect-ratio: 727/400;
}
.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(3) {
  grid-area: sofa;
  aspect-ratio: 727/400;
  grid-column-start: 3;
  grid-column-end: 5;
}

/* 四张布局 - 右下图片 */
.characteristic-block-collection-list.list-column-4
  .characteristic-block-collection-list__item:nth-child(4) {
  grid-area: tv;
  aspect-ratio: 1207/400;
}

/* 五张布局 - 右下左侧图片 */
.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(4) {
  grid-area: tv;
  aspect-ratio: 727/400;
  grid-column-start: 2;
  grid-column-end: 4;
}

/* 五张布局 - 右下右侧图片 */
.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(5) {
  grid-area: chair;
  aspect-ratio: 460/400;
  grid-column-start: 4;
  grid-column-end: 5;
}

.characteristic-block-collection-list
  .characteristic-block-collection-list__item {
  position: relative;
  overflow: hidden;
}
.characteristic-block-collection-list
  .characteristic-block-collection-list__item
  .block-collection-card__image-wrapper {
  height: 100%;
  border: none;
}
.characteristic-block-collection-list
  .characteristic-block-collection-list__item
  img {
  width: 100%;
  height: 100%;
}
.characteristic-block-collection-list
  .block-collection-card__image-title-wrapper {
  width: 100%;
  height: 100%;
}

@media (max-width: 959px) {
  .characteristic-block-collection-list {
    width: calc(100% + var(--page-padding) * 2);
    padding-inline: var(--page-padding);
    margin-inline: calc(-1 * var(--page-padding));
    scroll-padding-inline: var(--page-padding);
  }

  .characteristic-block-collection-list.list-column-3 {
    /* 定义网格模板区域 */
    grid-template-areas:
      "cabinet sofa"
      "tv tv";
    /* 三列布局，左侧固定宽度 */
    grid-template-columns: 1fr 1fr;
    /* 两行，第一行自适应，第二行固定高度 */
    grid-template-rows: 1fr 1fr;
  }

  /* 第一张图占据整行 */
  .characteristic-block-collection-list.list-column-3
    .characteristic-block-collection-list__item:nth-child(1) {
    grid-area: cabinet;
    aspect-ratio: 346/441; /* 设置宽高比 */
  }
  .characteristic-block-collection-list.list-column-3
    .characteristic-block-collection-list__item:nth-child(2) {
    grid-area: sofa;
    aspect-ratio: 346/441; /* 设置宽高比 */
  }

  /* 第三张图占据右列 */
  .characteristic-block-collection-list.list-column-3
    .characteristic-block-collection-list__item:nth-child(3) {
    grid-area: tv;
    aspect-ratio: 711/441;
  }

  /* 四张布局 */
  .characteristic-block-collection-list.list-column-4 {
    /* 定义网格模板区域 */
    grid-template-areas:
      "cabinet bed"
      "sofa tv";
    /* 三列布局，左侧固定宽度 */
    grid-template-columns: 1fr 1fr;
    /* 两行，第一行自适应，第二行固定高度 */
    grid-template-rows: 1fr 1fr;
  }
  .characteristic-block-collection-list.list-column-4
    .characteristic-block-collection-list__item:nth-child(1) {
    grid-area: cabinet;
    aspect-ratio: 346/440;
  }
  .characteristic-block-collection-list.list-column-4
    .characteristic-block-collection-list__item:nth-child(2) {
    grid-area: bed;
    aspect-ratio: 346/441;
  }
  .characteristic-block-collection-list.list-column-4
    .characteristic-block-collection-list__item:nth-child(3) {
    grid-area: sofa;
    aspect-ratio: 346/441;
  }
  .characteristic-block-collection-list.list-column-4
    .characteristic-block-collection-list__item:nth-child(4) {
    grid-area: tv;
    aspect-ratio: 346/441;
  }

  /* 五张布局 */
  .characteristic-block-collection-list.list-column-5 {
    /* 定义网格模板区域 */
    grid-template-areas:
      "cabinet sofa"
      "cabinet tv"
      "chair bed";
    /* 三列布局，左侧固定宽度 */
    grid-template-columns: 1fr 1fr;
    /* 两行，第一行自适应，第二行固定高度 */
    grid-template-rows: 1fr 1fr 2fr;
  }
  .characteristic-block-collection-list.list-column-5
    .characteristic-block-collection-list__item:nth-child(1) {
    grid-area: cabinet;
    aspect-ratio: 346/470;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  .characteristic-block-collection-list.list-column-5
    .characteristic-block-collection-list__item:nth-child(2) {
    grid-area: sofa;
    aspect-ratio: 346/210;
  }
  .characteristic-block-collection-list.list-column-5
    .characteristic-block-collection-list__item:nth-child(3) {
    grid-area: tv;
    aspect-ratio: 346/210;
  }
  .characteristic-block-collection-list.list-column-5
    .characteristic-block-collection-list__item:nth-child(4) {
    grid-area: chair;
    aspect-ratio: 346/441;
  }
  .characteristic-block-collection-list.list-column-5
    .characteristic-block-collection-list__item:nth-child(5) {
    grid-area: bed;
    aspect-ratio: 346/441;
  }
    
  .characteristic-block-collection-list.list-column-4
  .characteristic-block-collection-list__item
  .characteristic-block-collection-card__title,
  .characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item
  .characteristic-block-collection-card__title,
  .characteristic-block-collection-list.list-column-3
  .characteristic-block-collection-list__item
  .characteristic-block-collection-card__title {
    right: auto;
    left: 0;
  }
}

.characteristic-block-collection-list__button {
  position: absolute;
  inset-block-start: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: rgb(0 0 0 / 100%);
  background-color: rgb(255 255 255 / 100%);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgb(0 0 0 / 15%);
}

.characteristic-block-collection-list__button:disabled {
  display: none;
}

.characteristic-block-collection-list__button--previous {
  inset-inline-start: 0;
  transform: translate(-50%, -50%);
}

.characteristic-block-collection-list__button--previous svg {
  transform: rotate(180deg);
}

.characteristic-block-collection-list__button--next {
  inset-inline-end: 0;
  transform: translate(50%, -50%);
}
.characteristic-characteristic-block-collection-list {
  display: flex;
  flex-direction: row;
  gap: 20px;
}