adding mobile headshot image to be able to match designs

opentech/public/people/templates/people/person_page.html

@@ -15,6 +15,10 @@
             <h4 class="heading">{{ page.job_title }}</h4>
         {% endif %}
 
+        {% if page.photo %}
+            {% image page.photo fill-210x235 class="image image--headshot-mobile" %}
+        {% endif %}
+
         {% if page.introduction %}
             <h4 class="heading heading--person-introduction">{{ page.introduction }}</h4>
         {% endif %}
@@ -43,7 +47,7 @@
 
     <div>
         {% if page.photo %}
-            {% image page.photo fill-210x235 %}
+            {% image page.photo fill-210x235 class="image image--headshot-desktop" %}
         {% endif %}
 
         {% if page.social_media_profile.all %}

opentech/static_src/src/sass/components/_image.scss

+.image {
+    &--headshot-mobile {
+        display: block;
+
+        @include media-query(tablet-portrait) {
+            display: none;
+        }
+    }
+
+    &--headshot-desktop {
+        display: none;
+
+        @include media-query(tablet-portrait) {
+            display: block;
+        }
+    }
+}

opentech/static_src/src/sass/main.scss

@@ -21,6 +21,7 @@
 @import 'components/fund-box';
 @import 'components/grid';
 @import 'components/icon';
+@import 'components/image';
 @import 'components/input';
 @import 'components/link';
 @import 'components/list';