I'm getting unexpected output within media queries
Try it this way. Why are your outputting multiple images for the same background image for the same class.  The last item will override the previous. 

{% set news = craft.entries.section('news').limit(3) %}
&lt;style type="text/css"&gt;
  {% for item in news %}
    @media (min-width: 1200px){
        .hero{
            background-image:url(
               {% set cover = item.promotionImage %}
               {% if cover|length %}
                   {{ cover[0].getUrl('gtLg') }}
               {% endif %}
             );
         }
    } 
  {% endfor %}                      
&lt;/style&gt;