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

.image-collage__heading{
  color: rgb(var(--color-text));
}

.image-collage__image {
  position: relative;
  display: flex;
  height: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
}
.image-collage__image-fl{
  border-radius: unset;
}
.image-collage__image > img {
  max-width: 100%;
  height: 100%;
  aspect-ratio: var(--aspect-ratio);
  object-fit: cover;
  /* border-radius: var(--border-radius); */
}
.image-collage__image .hover-scale__image {
  width: 100%;
}
.image-collage__image .empty-image-class {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-image-background));
}

.image-collage__image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--aspect-ratio);
  overflow: hidden;
  background-color: rgb(var(--color-image-background));
  border-radius: var(--border-radius);
}
.image-collage__image-wrapper-fl{
  border-radius: unset;
}
.image-collage__image-wrapper > svg {
  width: 100%;
  height: 100%;
}
.image-collage__image-wrapper > .image-collage__image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: var(--fit-type);
  transition: 1s;
}
.image-collage__image-wrapper > .image-collage__image:nth-of-type(1) {
  opacity: 1;
}
.image-collage__image-wrapper > .image-collage__image:nth-of-type(2) {
  opacity: 0;
}

.image-collage__group {
  width: 100%;
  flex: 1;
  display: grid;
  gap: 20px;
  /* 定义网格模板区域 */
  grid-template-areas:
    "sofa cabinet"
    "sofa chair";
  /* 三列布局，左侧固定宽度 */
  grid-template-columns: 2fr 1fr;
  /* 两行，第一行自适应，第二行固定高度 */
  grid-template-rows: 1fr 1fr;
}

.image-collage__group__last{
  grid-template-areas:
    "cabinet sofa"
    "chair sofa";
  /* 三列布局，左侧固定宽度 */
  grid-template-columns: 1fr 2fr;
}

.image-collage__group
  .image-collage__image:nth-child(1) {
  grid-area: sofa;
  aspect-ratio: 938/1124;
  /* grid-row-start: 1;
  grid-row-end: 3; */
}
.image-collage__group
  .image-collage-product {
  grid-area: cabinet;
  aspect-ratio: 460/552;
}
.image-collage__group
  .image-collage-series {
  grid-area: chair; 
  aspect-ratio: 460/552;
}

.image-collage__group
  .image-collage__image {
  width: 100%;
  height: 100%;
}
/* 所有图片的基础样式 */
.image-collage__group
  .image-collage__image
  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.image-collage-product{
  background-color: #fff;
  border-radius: var(--border-radius);
  overflow: hidden;
  /* box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1); */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.image-collage-img-wrapper{
  flex: 1;
}
.image-collage-product-text-cent{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.image-collage-product .image-collage-title{
  font-size: 16px;
  padding-left: 20px;
  padding-right: 20px;
  color: rgb(var(--color-button-text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.image-collage-product .image-collage-price{
  font-size: 20px;
  padding-left: 20px;
  padding-right: 20px;
  color: rgb(var(--color-button-text));
}

.image-collage-series{
  background-color: #fff;
  border-radius: var(--border-radius);
  overflow: hidden;
  /* box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1); */
}

.image-collage-series .image-collage-title{
  font-size: 20px;
  padding: 7% 20px;
  color: rgb(var(--color-button-text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 959px) {
  .image-collage__group{
    grid-template-areas:
      "sofa"
      "cabinet"
      "chair";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .image-collage-series .image-collage-title{
    padding: 20px;
  }
}