/* Styles for Landing v4 Form Carousel */

.landing-v4-form-carousel .swiper-slide {
    position: relative;
}

.landing-v4-form-carousel .swiper-slide .slide-image {
    border-radius: 15px;
    overflow: hidden;
}

.landing-v4-form-carousel .swiper-slide .slide-image img {
    display: block;
    transition: all ease .5s;
    width: 100%;
    height: auto;
}

.landing-v4-form-carousel .swiper-pagination {
    position: relative;
    bottom: auto;
    height: 8px;
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.landing-v4-form-carousel .swiper-pagination .swiper-pagination-bullet {
    background-color: #FFFFFF;
    opacity: 0.4;
}
.landing-v4-form-carousel .swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    width: 24px;
    border-radius: 4px;
}

.landing-v4-form-carousel .slide-name {
    color: #FFFFFF;
    font-family: "Arada-Headline-Regular-s";
    font-weight: 700;
    font-size: 35px;
    line-height: 120%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px;
}

/* Mobile: each slide displays individually */
@media only screen and (max-width: 767px) {
    .landing-v4-form-carousel .swiper-slide {
        width: 240px;
        flex: 0 0 auto;
    }

    .section-contact-form {
        background: black;
    }

    /* .landing-v4-form-carousel .swiper-slide.slide-top .slide-image {
        aspect-ratio: 472 / 331;
    }

    .landing-v4-form-carousel .swiper-slide.bottom-item .slide-image {
        aspect-ratio: 231 / 331;
    } */
}

/* Desktop: arrange 3 slides in a grid (1 top full-width, 2 bottom side-by-side) */
@media only screen and (min-width: 768px) {
    .landing-v4-form-carousel .swiper-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        gap: 10px;
    }

    .landing-v4-form-carousel .swiper-slide {
        width: 100%;
    }

    .landing-v4-form-carousel .swiper-slide.slide-top {
        grid-column: 1 / -1;
    }

    .landing-v4-form-carousel .swiper-slide.slide-top .slide-image {
        aspect-ratio: 472 / 331;
    }

    .landing-v4-form-carousel .swiper-slide.bottom-item .slide-image {
        aspect-ratio: 231 / 331;
    }
}

/* override column gap in global-styles-inline-css.css */
:where(.wp-block-columns.is-layout-flex) {
    gap: 16px;
}