/* =========================
           Responsive
   ========================= */

.section--drinkcold {
    background-image: var(--bg-mobile, var(--bg-tablet, var(--bg-desktop)));
     /* background-position-y: calc(0px - 100vh); */
  color: var(--brand-black-color);
  background-color: var(--brand-grey-color);
}

.section--drinkcold h1,
.section--drinkcold h2,
.section--drinkcold h3,
.section--drinkcold p,
.section--drinkcold a {
  color: var(--brand-black-color);
}
.wrap--drinkcold {
    grid-template-areas: "title" "carousel" "product";
}
/* .homesection.drinkcold .swiper-pagination {
    position: absolute;
    bottom: 200px;
} */

.deco-item-right--drinkcold {
    right: 5%;
    top: 34%;
    width: 20%;
}

/* ============================
             断点768px
   ============================ */
@media(min-width: 768px) {
    .section--drinkcold {
    background-image: var(--bg-tablet, var(--bg-desktop));
     /* background-position-y: calc(0px - 100vh); */
}
        .deco-item-right--drinkcold {
        top: 57%;
        right: 25%;
        width: 13%;
    }
}
/* =========================
         断点：1024px
   ========================= */
@media(min-width: 1024px) {
.section--drinkcold {
    background-image: var(--bg-desktop);
     /* background-position-y: calc(0px - 100vh); */
}

.wrap--drinkcold {
            min-height: 100vh;
     min-height: 100dvh;
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: auto 1fr; /* 第一行高度自适应，第二行撑满剩余 */
        grid-template-areas:
            "product title"
            "product carousel";
        align-items: start; /* 从顶部开始对齐 */
        gap: 2rem 3rem;
    }
    .item-1--drinkcold {
        grid-row: 1;
        grid-column: 2;
    }

    .item-2--drinkcold {
        grid-row: 1;
        grid-column: 1;
        justify-self: end;
    }

    .item-3--drinkcold {
        grid-row: 2;
        grid-column: 2;
    }

        .deco-item-right--drinkcold {
        left: 3%;
        top: 75%;
        width: min(110px, 10vw);
    }
}
@media (min-width: 1024px) and (max-height: 850px) {
    .wrap--drinkcold {
        grid-template-columns: 2fr 1fr;
    }
        .product-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .item-1--drinkcold,
    .item-2--drinkcold,
    .item-3--drinkcold {
        grid-row: auto;
        grid-column: auto;
        justify-self: auto; /* 或者 'stretch'，但 'auto' 通常是最好的重置值 */
    }

}