{block name='et-style-breakpoint-values-generic'}
    {$targetElement = $targetElement|default:''}
    {$cssProperties = $cssProperties|default:[]}
    {$cssValuePrefix = $cssValuePrefix|default:''}
    {$cssValueSuffix = $cssValueSuffix|default:''}
    {if isset($breakpointValues) && count($breakpointValues) > 0 && $targetElement !== '' && count($cssProperties) > 0}
        <style type="text/css">
            {if isset($breakpointValues.xs) && $breakpointValues.xs !== ''}
                @media (max-width: {$et_global.breakpoints.xsMax}px) {
                    {$targetElement} {
                        {foreach $cssProperties as $cssProperty}
                            {$cssProperty}: {$cssValuePrefix}{$breakpointValues.xs}{$cssValueSuffix};
                        {/foreach}
                    }
                }
            {/if}
            {if isset($breakpointValues.sm) && $breakpointValues.sm !== ''}
                @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px)  {
                    {$targetElement} {
                        {foreach $cssProperties as $cssProperty}
                            {$cssProperty}: {$cssValuePrefix}{$breakpointValues.sm}{$cssValueSuffix};
                        {/foreach}
                    }
                }
            {/if}
            {if isset($breakpointValues.md) && $breakpointValues.md !== ''}
                @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px)  {
                    {$targetElement} {
                        {foreach $cssProperties as $cssProperty}
                            {$cssProperty}: {$cssValuePrefix}{$breakpointValues.md}{$cssValueSuffix};
                        {/foreach}
                    }
                }
            {/if}
            {if isset($breakpointValues.lg) && $breakpointValues.lg !== ''}
                @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px)  {
                    {$targetElement} {
                        {foreach $cssProperties as $cssProperty}
                            {$cssProperty}: {$cssValuePrefix}{$breakpointValues.lg}{$cssValueSuffix};
                        {/foreach}
                    }
                }
            {/if}
            {if isset($breakpointValues.xl) && $breakpointValues.xl !== ''}
                @media (min-width: {$et_global.breakpoints.xlMin}px) {
                    {$targetElement} {
                        {foreach $cssProperties as $cssProperty}
                            {$cssProperty}: {$cssValuePrefix}{$breakpointValues.xl}{$cssValueSuffix};
                        {/foreach}
                    }
                }
            {/if}
        </style>
    {/if}
{/block}