/* 桌面端布局 - 使用Grid */
.product-section-9 .product-content {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--grid-horizontal-gap) var(--grid-vertical-gap);
}

.product-section-9 .product-content + .product-content {
  margin-top: var(--grid-horizontal-gap);
}

.product-section-9 .product-content .product-card:nth-of-type(1),
.product-section-9 .product-content .item-card:nth-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  aspect-ratio: 1;
}

.product-section-9 .product-content .product-card:nth-of-type(2),
.product-section-9 .product-content .item-card:nth-of-type(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  aspect-ratio: 1;
}

.product-section-9 .product-content .product-card:nth-of-type(3),
.product-section-9 .product-content .item-card:nth-of-type(3) {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  position: relative;
  overflow: hidden;
}

.product-section-9 .product-content .product-card:nth-of-type(3) .product-image,
.product-section-9 .product-content .item-card:nth-of-type(3) .item-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.product-section-9 .product-content .product-card:nth-of-type(4),
.product-section-9 .product-content .item-card:nth-of-type(4) {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
  aspect-ratio: 1;
}

.product-section-9 .product-card .product-image,
.product-section-9 .product-card .product-image img,
.product-section-9 .item-card .item-image,
.product-section-9 .item-card .item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* iPad端和移动端样式 (max-width: 991px) */
@media screen and (max-width: 991px) {
  .product-section-9 .product-content {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }

  .product-section-9 .product-content .product-card:nth-of-type(1),
  .product-section-9 .product-content .item-card:nth-of-type(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    aspect-ratio: 1;
  }

  .product-section-9 .product-content .product-card:nth-of-type(2),
  .product-section-9 .product-content .item-card:nth-of-type(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    aspect-ratio: 1;
  }
  
  .product-section-9 .product-content .product-card:nth-of-type(3),
  .product-section-9 .product-content .item-card:nth-of-type(3) {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    aspect-ratio: 3;
  }

  .product-section-9 .product-content .product-card:nth-of-type(4),
  .product-section-9 .product-content .item-card:nth-of-type(4) {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    aspect-ratio: 3;
  } 
}