ISTWCMS-3503: adding stylings and images for responsive images

source/_patterns/04-components/responsive-image/_responsive-image.scss

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

source/_patterns/04-components/responsive-image/responsive-image.twig

+{% if output_image_tag %}
+  {{ img_element }}
+{% else %}
+  <picture {{ attributes }}>
+    {% 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="contextual-region" src="{{ img_element }}" alt="{{ alt }}">
+  </picture>
+{% endif %}

source/_patterns/04-components/responsive-image/responsive-image.yml

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