/**
 * Floating Images Block Styles
 */

.floating-images-block {
    position: relative;
    height: var(--mobile-height);
}

.floating-image {
    position: absolute;
    z-index: 10;
    overflow: hidden;
}

.floating-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Desktop positioning using CSS variables */
.floating-image {
    top: var(--mobile-top);
    left: var(--mobile-left);
    right: var(--mobile-right);
    bottom: var(--mobile-bottom);
    width: var(--mobile-width);
    height: var(--mobile-height);
}

/* Responsive Breakpoints */
@media (min-width: 992px) {
    .floating-images-block {
        position: unset;
        height: auto;
    }

    .floating-image {
        top: var(--desktop-top);
        left: var(--desktop-left);
        right: var(--desktop-right);
        bottom: var(--desktop-bottom);
        width: var(--desktop-width);
        height: var(--desktop-height);
    }
}