@import "../vendor/swiper/swiper-bundle.min.css";

.featureBlock {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.featureBlock .featureBody,
.featureBlock .featureGallery {
    width: 50%;
}

.featureBlock .featureBody {
    display: flex;
    flex-direction: column;
}

.featureBlock.inverse {
    flex-direction: row-reverse;
}

.featureBlock img {
    aspect-ratio: 400/267;
    object-fit: cover;
}

.featureGalleryControl button {
    background: none;
    border: none;
    color: var( --e-global-color-1cf6be4 );
    font-size: 20px;
}

@media(max-width: 768px) {
    .featureBlock,
    .featureBlock.inverse {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 10px;
    }

    .featureBlock .featureBody,
    .featureBlock .featureGallery {
        width: 100%;
    }

    .featureBlock .featureBody {
        flex-direction: column-reverse;
    }

    .featureBlock .galleryControl {
        justify-self: center;
    }
}

.featureBlock.elementor-invisible .featureBody,
.featureBlock.elementor-invisible .featureGallery {
    opacity: 0;
    animation-name: none !important;
}

.featureBlock.inverse .featureGallery,
.featureBlock .featureBody {
    animation-name: fadeInLeft;
    animation-duration: 1.25s;
}

.featureBlock .featureGallery,
.featureBlock.inverse .featureBody {
    animation-name: fadeInRight;
    animation-duration: 1.25s;
}