.s_floating_blocks {
    // Use CSS custom properties in order to allow pro-users to performs
    // advanced visual customizations using inline style directly in the DOM
    // (eg. XML editor).
    --floating-boxes-box-ratio-sm: 0.6;
    --floating-boxes-box-ratio-lg: 2;
    --floating-boxes-box-ratio-lg-container-small: 1.6;
    --floating-boxes-box-ratio-xl: 2.3;

    --floating-boxes-box-padding-x-sm: #{map-get($spacers, 4)};
    --floating-boxes-box-padding-x-lg: #{map-get($spacers, 5)};

    // Minimal number of rows LG can handle
    --floating-boxes-grid-rows: 8;

    .s_floating_blocks_block {
        // Inherit global values from `s_floating_blocks_wrapper`
        border-radius: inherit;
        box-shadow: inherit;

        // Default values. Will be tweaked in JS on initialization
        top: 0;
        opacity: 0;

        transition: opacity .2s;
        will-change: transform;
        transform-origin: center top;
        contain: layout paint;
        backface-visibility: hidden;

        padding-left: var(--floating-boxes-box-padding-x, var(--floating-boxes-box-padding-x-sm));
        padding-right: var(--floating-boxes-box-padding-x, var(--floating-boxes-box-padding-x-sm));

        // Cards must have all the same height in order to perform the "floating
        // effect" correctly.
        aspect-ratio: var(--floating-boxes-box-ratio, var(--floating-boxes-box-ratio-sm));

        // Ensure that cards will never overflow the viewport, regardless by the
        // aspect-ratio and the viewport size.
        max-height: calc(100vh - #{map-get($spacers, 5) * 2}) !important; // Fallback
        max-height: calc(100lvh - #{map-get($spacers, 5) * 2}) !important;
    }

    @include media-breakpoint-up(lg) {
        > .container, > .container-fluid {
            --floating-boxes-box-ratio: var(--floating-boxes-box-ratio-lg);
            --floating-boxes-box-padding-x: var(--floating-boxes-box-padding-x-lg);
        }
        > .o_container_small {
            --floating-boxes-box-ratio: var(--floating-boxes-box-ratio-lg-container-small);
        }
        > .container-fluid > div {
            padding-left: map-get($spacers, 5);
            padding-right: map-get($spacers, 5);
        }

        .s_floating_blocks_block {
            > .container, > .container-fluid, > .o_container_small {
                // Inconsistency between card sizes at different breakpoints would
                // lead to edition usability issues. For example when elements are
                // positioned at the bottom of a card in XXL they may disappear in
                // LG.

                // Enforce grid to 8 rows, at any res bigger than LG, to avoid the
                // grid size inconsistencies across breakpoints.
                height: calc(50px * var(--floating-boxes-grid-rows));
            }
        }
    }

    @include media-breakpoint-up(xl) {
        > .container, > .container-fluid {
            --floating-boxes-box-ratio: var(--floating-boxes-box-ratio-xl);
        }

        > .container-fluid > div {
            padding-left: map-get($spacers, 5) * 2;
            padding-right: map-get($spacers, 5) * 2;
        }
    }

    @include media-breakpoint-up(xxl) {
        > .container-fluid > div {
            padding-left: map-get($spacers, 5) * 3;
            padding-right: map-get($spacers, 5) * 3;
        }
    }

    // Options
    .s_floating_blocks_wrapper.s_floating_blocks_wrapper_shadow {
        box-shadow: 0px 1vh 2vh rgba($black, .175);
    }
}