ISTWCMS-5647: adding responsive image component

src/patterns/04-components/responsive-image/_responsive-image.scss

+picture {
+  img {
+    width: 100%;
+  }
+
+  width: 100%;
+}

src/patterns/04-components/responsive-image/responsive-image.twig

+{% if output_image_tag %}
+  {{ img_element }}
+{% else %}
+  <picture class="uw-picture">
+    {% if sources %}
+      {#
+      Internet Explorer 9 doesn't recognise source elements that are wrapped in
+      picture tags. See http://scottjehl.github.io/picturefill/#ie9
+      #}
+      <!--[if IE 9]><video style="display: none;"><![endif]-->
+      {% for source in sources %}
+        <source srcset="{{ source.srcset|raw }}" media="{{ source.media }}" type="{{ source.type }}" />
+      {% endfor %}
+      <!--[if IE 9]></video><![endif]-->
+    {% endif %}
+    {# The controlling image, with the fallback image in srcset. #}
+    <img class="uw-picture__fallback" src="{{ img_element }}" alt="{{ alt }}">
+  </picture>
+{% endif %}

src/patterns/04-components/responsive-image/responsive-image.yml

+sources:
+  - srcset: '/images/president_xlarge.jpg'
+    media: 'all and (min-width: 63.19rem)'
+    type: 'image/jpeg'
+  - srcset: '/images/president_large.jpg'
+    media: 'all and (min-width: 49.81rem)'
+    type: 'image/jpeg'
+  - srcset: '/images/president_medium.jpg'
+    media: 'all and (min-width: 30rem)'
+    type: 'image/jpeg'
+  - srcset: '/images/president_small.jpg'
+    media: 'all and (min-width: 25rem)'
+    type: 'image/jpeg'
+  - srcset: '/images/president_xsmall.jpg'
+    media: 'all and (min-width: 15rem)'
+    type: 'image/jpeg'
+img_element: '/images/president_xlarge.jpg'
+alt: 'Alternative text'