.multi-img-card .swiper {
    width: 100%;
    height: 450px; /* Default for 3 columns */
    border-radius: 25px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Gold Border Toggle */
.multi-img-wrapper.has-swiper-border .multi-img-card .swiper {
    border: 3px solid #cb9913;
}

.multi-img-card .swiper-slide {
    width: 100% !important;
}

.multi-img-card .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.multi-img-card .swiper-button-next,
.multi-img-card .swiper-button-prev {
    color: #fff;
}

.multi-img-cards-container {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--container-gap, 30px);
    row-gap: 70px;
    justify-content: flex-start;
}

.multi-img-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

/* 3 Columns - Original Gap (30px) */
.multi-img-cards-container.cols-3 {
    --container-gap: 30px;
}
.multi-img-cards-container.cols-3 .multi-img-card {
    width: calc(33.333% - (var(--container-gap) * 2 / 3));
}

/* 4 Columns - Increased Gap (40px) and Shorter Swiper */
.multi-img-cards-container.cols-4 {
    --container-gap: 40px;
}
.multi-img-cards-container.cols-4 .multi-img-card {
    width: calc(25% - (var(--container-gap) * 3 / 4));
}
.multi-img-cards-container.cols-4 .swiper {
    height: 250px; /* Shortened height for 4 column desktop layout */
}

.multi-img-cards-container.two-columns .multi-img-card {
    width: calc(50% - (var(--container-gap) / 2));
}

.multi-img-cards-container.two-columns .swiper {
    height: 450px !important;
}

.multi-img-cards-container.two-columns .swiper-slide img {
    height: 450px !important;
    aspect-ratio: 16 / 9; 
}

@media (max-width: 768px) {
    .multi-img-wrapper {
        margin-top:2px !important;
        margin-bottom:30px !important;
        padding: 0px;
        box-sizing: border-box;
    }

    .multi-img-card {
        width: 100% !important;
        padding-bottom: 20px;
        margin-left:20px;
        margin-right:20px;
        margin-top:20px;
    }

    .multi-img-card .button {
        margin-top: 20px;
    }

    .multi-img-card .swiper{
        border-radius:0px !important;
        height:250px; /* Remains 250px on mobile as per original request */
    }

    .multi-img-cards-container {
        column-gap: 0px !important;
        row-gap:30px !important;
    }

    .multi-img-cards-container.two-columns .swiper {
        height: 250px !important;
    }

    .multi-img-cards-container.two-columns .swiper-slide img {
        height: 250px !important;
        aspect-ratio: 16 / 9; 
    }

    .multi-img-card p{
        padding-left:20px;
        padding-right:20px;
    }
}