<?php

/* === ID === */
$spacing_id = uniqid("stm-spacing-");
?>
<div class="stm-spacing" id="<?php echo esc_attr( $spacing_id ); ?>"></div>
<script>
    (function($){
        "use strict";
        var spacingID = '<?php echo esc_js( $spacing_id ); ?>',
            lgSpacing = '<?php echo esc_js( $lg_spacing ); ?>',
            mdSpacing = '<?php echo esc_js( $md_spacing ); ?>',
            smSpacing = '<?php echo esc_js( $sm_spacing ); ?>',
            xsSpacing = '<?php echo esc_js( $xs_spacing ); ?>';

        function stmSpacing() {
            if ( window.matchMedia("(min-width: 1200px)").matches && lgSpacing ) {
                $( '#' + spacingID ).css ( "height", lgSpacing );
            } else if ( window.matchMedia("(max-width: 1199px) and (min-width: 992px )").matches && mdSpacing ) {
                $( '#' + spacingID ).css ( "height", mdSpacing );
            } else if ( window.matchMedia("(max-width: 991px) and (min-width: 768px )").matches && smSpacing ) {
                $( '#' + spacingID ).css ( "height", smSpacing );
            } else if ( window.matchMedia("(max-width: 767px)").matches && xsSpacing ) {
                $( '#' + spacingID ).css ( "height", xsSpacing );
            } else {
                $( '#' + spacingID ).css ( "height", "" );
            }
        }

        $(document).ready(function() {
            stmSpacing();
        });

        $(window).resize(function() {
            stmSpacing();
        });

    })(jQuery);
</script>