Case studies: Add map

About: add Timeline.

_data/about.yaml

@@ -33,3 +33,6 @@ body: |
   </p>
 footer:   We are a team of from France, Poland, Italy, Netherlands and Czech Republic supported during 2 years and half by Erasmus+ KA2 program.
 
+bottom_image:
+  url: /assets/about/Multicolor_Professional_Chronological_Timeline_Infographic.jpg
+  description: Chronological timeline infographic

_sass/_about.sass

@@ -5,6 +5,16 @@
     @media screen and (max-width: $breakpoint-small)
         flex-flow: column
 
+    .text
+        display: flex
+        flex-flow: column
+        picture
+            text-align: center
+            object-fit: fill
+            img
+                width: auto
+                height: auto
+                margin: 24pt 0
     .gallery
         display: flex
         flex-wrap: wrap

_sass/_map.sass

@@ -0,0 +1,3 @@
+.map
+    @media screen and (max-width: $breakpoint-small)
+        height: 400pt

about/index.html

@@ -18,6 +18,7 @@ <h1>{{ site.data.about.title }}</h1>
                 {{ site.data.about.body }}
             </div>
             <div class="caption">{{ site.data.about.footer }}</div>
+            {% picture {{ site.data.about.bottom_image.url }} --alt {{ site.data.about.bottom_image.description }} %}
         </div>
     </section>
 </div>

assets/global/css/style.sass

@@ -10,3 +10,4 @@
 @import "toolkit"
 @import "question"
 @import "about"
+@import "map"

case_studies/index.html

@@ -2,10 +2,21 @@
 title: Case studies
 layout: default
 ---
+{%- include component-lazyiframe.html -%}
+
 <div class="page__top-content page__bottom-content width--wide ">
     <h1>{{ site.data.study_cases.title}}</h1>
     <abstract>{{ site.data.study_cases.abstract}}</abstract>
 
+    <section class="flex--space_evenly">
+        <lazy-iframe class="column__item--small map" style="display: block; overflow: hidden; "
+            title="Map of initiatives" allow="geolocation ; camera;" frameborder="0"
+            src="https://www.mapotic.com/pilot-cities/embed?zoom=3.719309383289333&lat=48.23462655956004&lng=10.771234864936204">
+            {% picture /assets/toolkit/mapotic_placeholder.jpg --alt {{ site.data.home.part3.image.description }}
+            --img style="object-fit: cover"
+            --parent slot="placeholder" %}
+        </lazy-iframe>
+    </section>
     <section class="flex--space_evenly">
         {%- for pilot_city in site.data.study_cases.pilot_cities -%}
         <div class="card column__item">
@@ -14,5 +25,6 @@ <h3>{{ pilot_city.title }}</h3>
             <p>{{ pilot_city.body }}</p>
         </div>
         {%- endfor -%}
+
     </section>
 </div>