I'm getting unexpected output within media queries It outputs the same image, which shouldn't and I am suspicious, that it causing it curly brackets followed after media queries and after twig code.

{% set news = craft.entries.section('news').limit(3) %}
{% for news in news %}
    &lt;style type="text/css"&gt;
        @media (min-width: 1200px){
            .hero{
                background-image:url(
                   {% set cover = news.promotionImage %}
                   {% if cover|length %}
                       {{ cover[0].getUrl('gtLg') }}
                   {% endif %});
                 }
        }                       
    &lt;/style&gt;
    &lt;a ng-href="{{ news.url }}" flex layout-padding class="promo news {% if news.whiteText %}whiteText{% endif %}"&gt;
        &lt;span flex="grow" class="promoText md-headline"&gt;
            {{ news.promotionNewsText|ucfirst }}
        &lt;/span&gt;
    &lt;/a&gt;
{% endfor %}
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;