About page.

_data/about.yaml

@@ -1,16 +1,35 @@
 title: What is <strong>FUND-IT</strong>
-image:
-  url: /assets/about/what_is_fundit.jpg
-  description: What is fundit illustration
-testimony:
-  title: FUND-IT project wants to improve young people’s entrepreneurial skills,
-  body: |
+images: 
+  - url: /assets/about/1.jpg
+    description: What is fundit illustration
+    width: 4624
+    height: 3472 
+  - url: /assets/about/2.jpg
+    description: What is fundit illustration
+    width: 3024
+    height: 4032 
+  - url: /assets/about/3.jpg
+    description: What is fundit illustration
+    width: 4032
+    height: 3024 
+  - url: /assets/about/4.jpg
+    description: What is fundit illustration
+    width: 3280
+    height: 2464 
+  - url: /assets/about/5.jpg
+    description: What is fundit illustration
+    width: 4032
+    height: 3024 
+
+body: |
+  <p>
     FUND-IT project wants to improve young people’s entrepreneurial skills, so they start to plan more, pay more and better attention to financial matters and think about their business models. Even in a non-profit area. Sustainability and efficiency is a key to expanding the impact of these youth projects. Different models of funding should be examined and improved. 
-    <br/>
-    <br/>
+  </p>
+  <p>
     We focus on an international group of young initiatives that sprang up around the USE-IT project. The non-commercial USE-IT map guides created by locals, honest and practical, are showing the real face of cities, breaking a bubble between locals and travelers. 
-    <br/>
-    <br/>
+  </p>
+  <p>
     The worthiness of their mission is obvious since it meets European values on many levels. It supports intercultural understanding, fights the social exclusion between locals and tourists and does create European citizens. It is truly bottom-up and the maps show that there is “unity in diversity”.
-  footer:   We are a team of from France, Poland, Italy, Netherlands and Czech Republic supported during 2 years and half by Erasmus+ KA2 program.
+  </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.
 

_sass/_about.sass

@@ -0,0 +1,33 @@
+.about__content
+    display: flex
+    gap: 12pt
+
+    @media screen and (max-width: $breakpoint-small)
+        flex-flow: column
+
+    .gallery
+        display: flex
+        flex-wrap: wrap
+        gap: 12pt
+        justify-content: center
+        img
+            object-fit: cover
+            aspect-ratio: 1 / 1
+            min-width: 100pt
+            max-width: 200pt
+            @media screen and (max-width: $breakpoint-small)
+                max-width: 100pt
+
+    // p
+    //     min-height: 120pt
+    //     img
+    //         width: 100pt
+    //         margin: 0 12pt
+
+    // p:nth-of-type(even)
+    //     img
+    //         float: left
+
+    // p:nth-of-type(odd)
+    //     img
+    //         float: left

about/index.html

@@ -4,12 +4,31 @@
 ---
 <div class="content width--narrow page__top-content page__bottom-content">
     <h1>{{ site.data.about.title }}</h1>
-    <div class="layout-two-columns">
-        {% picture {{ site.data.about.image.url }} --alt {{ site.data.about.image.description }} --parent
-        class="layout-two-columns__left picture--square"%}
-        <div class="layout-two-columns__right">
-            <p>{{site.data.about.testimony.body}} </p>
-            <div class="caption">{{ site.data.about.testimony.footer }}</div>
+    <section class="about__content">
+        <div class="gallery pswp-gallery pswp-gallery--single-column">
+            {% for image in site.data.about.images %}
+            <a href="{{ image.url }}" data-pswp-width="{{ image.width }}" data-pswp-height="{{ image.height}}"
+                target="_blank">
+                {% picture {{ image.url }} --alt {{ image.description }} --parent class="picture--square" %}
+            </a>
+            {% endfor %}
         </div>
-    </div>
-</div>
+        <div class="text">
+            <div class="body">
+                {{ site.data.about.body }}
+            </div>
+            <div class="caption">{{ site.data.about.footer }}</div>
+        </div>
+    </section>
+</div>
+
+<script type="module">
+    import PhotoSwipeLightbox from '/assets/global/libs/photoswipe/photoswipe-lightbox.esm.min.js';
+    const lightbox = new PhotoSwipeLightbox({
+        gallery: '.gallery',
+        children: 'a',
+        pswpModule: () => import('/assets/global/libs/photoswipe/photoswipe.esm.min.js')
+    });
+    lightbox.init();
+</script>
+<link rel="stylesheet" href="/assets/global/libs/photoswipe/photoswipe.css">

assets/global/css/style.sass

@@ -9,3 +9,4 @@
 @import "home"
 @import "toolkit"
 @import "question"
+@import "about"