/* ==========================================
   蔚蓝 设计展示组件样式 - 2行3列轮播
   ========================================== */

.weilan-design {
  position: relative;
  width: 100%;
  /* padding: var(--spacing-9xl, 7.5rem) 0; */
  padding-bottom: 2.75rem;
  font-family: var(--font-family);
}

.weilan-design-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  object-position: top;
  width: 100%;
  height: 160%;
}

.weilan-design > .container {
  z-index: 5;
  position: relative;
}
/* ==========================================
   头部区域
   ========================================== */

.weilan-design-header {
  text-align: center;
  margin-bottom: 4.125rem;
}

.weilan-design-title {
  color: var(--text-color-light);
  text-align: center;
  margin: 0;
}

/* ==========================================
   Swiper 容器
   ========================================== */

.weilan-design-swiper-container {
  position: relative;
  /* margin-bottom: 3.75rem; */
}

.weilan-design-swiper {
  overflow: hidden;
}

.weilan-design-swiper .swiper-wrapper {
  display: flex;
}

.weilan-design-swiper .swiper-slide {
  height: auto;
  box-sizing: border-box;
}

/* 每个 slide 内的 6 个为一组网格（2行3列） */
.weilan-design-slide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  row-gap: 1.3125rem;
  column-gap: 2.25rem;
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .weilan-design-slide-grid {
    gap: 1.875rem;
  }
}

@media screen and (max-width: 768px) {
  .weilan-design-slide-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media screen and (max-width: 576px) {
  .weilan-design-slide-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1rem;
  }
}

/* ==========================================
   设计项目图片
   ========================================== */

.weilan-design-item-image {
  position: relative;
  width: 100%;
  aspect-ratio: 508 / 315;
  overflow: hidden;
}

.weilan-design-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* transition: transform 0.5s ease; */
}
/* 
.swiper-slide:hover .weilan-design-item-image img {
  transform: scale(1.05);
} */

/* ==========================================
   响应式设计
   ========================================== */

/* 平板 (1024px - 1440px) */
@media screen and (max-width: 1440px) {
}

/* 平板 (768px - 1024px) */
@media screen and (max-width: 1024px) {
}

/* 移动端 (最大 768px) */
@media screen and (max-width: 768px) {
}

/* 小屏移动端 (最大 576px) */
@media screen and (max-width: 576px) {
}