From f62ba8ebf419131da606b99a946ca5da1d7a97cc Mon Sep 17 00:00:00 2001
From: Michele Pulvirenti <pulvirentimichele00@gmail.com>
Date: Sun, 26 May 2024 16:37:13 +0200
Subject: [PATCH 1/6] Fix #nt24 on safari

---
 .../NaturalmenteTecnologici/index.module.scss       |  5 +++++
 .../molecules/NaturalmenteTecnologici/index.tsx     | 13 ++-----------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/molecules/NaturalmenteTecnologici/index.module.scss b/src/components/molecules/NaturalmenteTecnologici/index.module.scss
index ee0c4bc..f5c44d8 100644
--- a/src/components/molecules/NaturalmenteTecnologici/index.module.scss
+++ b/src/components/molecules/NaturalmenteTecnologici/index.module.scss
@@ -29,6 +29,11 @@
   }
 }
 
+.video {
+  clip-path: url(#clip-00);
+  -webkit-clip-path: url(#clip-00);
+}
+
 .singleSectionsWrap {
   display: flex;
   flex-direction: row;
diff --git a/src/components/molecules/NaturalmenteTecnologici/index.tsx b/src/components/molecules/NaturalmenteTecnologici/index.tsx
index a1e37cd..c5e25c3 100644
--- a/src/components/molecules/NaturalmenteTecnologici/index.tsx
+++ b/src/components/molecules/NaturalmenteTecnologici/index.tsx
@@ -102,17 +102,8 @@ const Index = () => {
                   <path d="M 91.3 32.601 L 75.5 32.601 L 73.5 42.101 L 84.5 42.101 L 84.5 62.301 L 69.1 62.301 L 66.5 74.701 L 45.9 74.701 L 48.5 62.301 L 34.6 62.301 L 32 74.701 L 11.5 74.701 L 14.1 62.301 L 0 62.301 L 0 42.101 L 18.5 42.101 L 20.5 32.601 L 6.8 32.601 L 6.8 12.401 L 24.8 12.401 L 27.3 0.701 L 47.8 0.701 L 45.3 12.401 L 59.2 12.401 L 61.7 0.701 L 82.3 0.701 L 79.8 12.401 L 91.3 12.401 L 91.3 32.601 Z M 165.2 3.901 L 165.2 74.701 L 143 74.701 L 119.5 39.101 L 119.5 74.701 L 97.3 74.701 L 97.3 3.901 L 119.5 3.901 L 143 40.101 L 143 3.901 L 165.2 3.901 Z M 255.8 26.901 L 234.3 26.901 A 40.297 40.297 0 0 1 235.01 20.39 Q 235.726 16.768 237.138 13.812 A 22.329 22.329 0 0 1 238.35 11.601 A 23.686 23.686 0 0 1 243.997 5.288 A 21.941 21.941 0 0 1 248.1 2.801 A 30.16 30.16 0 0 1 259.079 0.069 A 35.659 35.659 0 0 1 261.3 0.001 A 42.211 42.211 0 0 1 268.128 0.515 Q 271.732 1.107 274.577 2.382 A 17.437 17.437 0 0 1 280.05 6.151 A 20.908 20.908 0 0 1 285.824 18.703 A 28.34 28.34 0 0 1 286 21.901 A 31.032 31.032 0 0 1 280.884 38.9 A 38.718 38.718 0 0 1 279.55 40.851 Q 273.1 49.701 263.4 55.801 L 286.3 55.801 L 286.3 73.701 L 234.6 73.701 L 234.6 57.001 A 248.644 248.644 0 0 0 243.508 50.052 Q 247.612 46.688 250.988 43.565 A 111.131 111.131 0 0 0 255.8 38.851 Q 260.425 34.019 262.307 29.556 A 15.272 15.272 0 0 0 263.6 23.601 A 8.806 8.806 0 0 0 263.492 22.176 Q 263.264 20.784 262.55 19.901 Q 261.5 18.601 259.8 18.601 A 3.258 3.258 0 0 0 257.194 19.852 A 5.263 5.263 0 0 0 256.65 20.651 Q 255.5 22.701 255.8 26.901 Z M 171.2 3.901 L 230.8 3.901 L 230.8 21.501 L 212 21.501 L 212 74.701 L 189.8 74.701 L 189.8 21.501 L 171.2 21.501 L 171.2 3.901 Z M 324.9 63.701 L 293.6 63.701 L 293.6 45.201 L 323.4 2.701 L 347.3 2.701 L 347.3 44.501 L 354.5 44.501 L 354.5 63.701 L 347.3 63.701 L 347.3 74.701 L 324.9 74.701 L 324.9 63.701 Z M 52.9 42.101 L 54.9 32.601 L 41 32.601 L 39 42.101 L 52.9 42.101 Z M 326.7 44.501 L 326.7 28.001 L 315.9 44.501 L 326.7 44.501 Z" />
                 </clipPath>
               </defs>
-              <foreignObject clipPath="url(#clip-00)" width="100%" height="100%">
-                <video
-                  className={styles.video}
-                  height={500}
-                  muted
-                  autoPlay
-                  controls={false}
-                  loop
-                  playsInline
-                  poster="/images/bosco-1-low.JPG"
-                >
+              <foreignObject className={styles.video} clipPath="url(#clip-00)" width="100%" height="100%">
+                <video height={500} muted autoPlay controls={false} loop playsInline poster="/images/bosco-1-low.JPG">
                   <source src={BoscoCoste} type="video/mp4" />
                   Your browser doesn't support video tag
                 </video>

From 13966e2bff9e0335343d206dae4853e094f364e8 Mon Sep 17 00:00:00 2001
From: Michele Pulvirenti <pulvirentimichele00@gmail.com>
Date: Sun, 26 May 2024 16:44:46 +0200
Subject: [PATCH 2/6] Another try

---
 .../molecules/NaturalmenteTecnologici/index.module.scss         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/molecules/NaturalmenteTecnologici/index.module.scss b/src/components/molecules/NaturalmenteTecnologici/index.module.scss
index f5c44d8..abe40dc 100644
--- a/src/components/molecules/NaturalmenteTecnologici/index.module.scss
+++ b/src/components/molecules/NaturalmenteTecnologici/index.module.scss
@@ -30,8 +30,8 @@
 }
 
 .video {
-  clip-path: url(#clip-00);
   -webkit-clip-path: url(#clip-00);
+  clip-path: url(#clip-00);
 }
 
 .singleSectionsWrap {

From f595dd59c0da4c7dd42f6967b01a43debb46cd0a Mon Sep 17 00:00:00 2001
From: Michele Pulvirenti <pulvirentimichele00@gmail.com>
Date: Sun, 26 May 2024 16:54:41 +0200
Subject: [PATCH 3/6] Another try

---
 .../molecules/NaturalmenteTecnologici/index.module.scss          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/molecules/NaturalmenteTecnologici/index.module.scss b/src/components/molecules/NaturalmenteTecnologici/index.module.scss
index abe40dc..eb80b92 100644
--- a/src/components/molecules/NaturalmenteTecnologici/index.module.scss
+++ b/src/components/molecules/NaturalmenteTecnologici/index.module.scss
@@ -32,6 +32,7 @@
 .video {
   -webkit-clip-path: url(#clip-00);
   clip-path: url(#clip-00);
+  transform: translateZ(0); // just to force component to render on safari
 }
 
 .singleSectionsWrap {

From 0739f4a9f710c88fd7a2fe0be7098125e4a5903a Mon Sep 17 00:00:00 2001
From: Michele Pulvirenti <pulvirentimichele00@gmail.com>
Date: Sun, 26 May 2024 19:14:11 +0200
Subject: [PATCH 4/6] =?UTF-8?q?Finally=20fixing=20it=20(=3F)=20?=
 =?UTF-8?q?=F0=9F=A4=AC=F0=9F=A5=B5=F0=9F=A5=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NaturalmenteTecnologici/index.module.scss  | 18 ++++++------------
 .../NaturalmenteTecnologici/index.tsx          | 17 ++++-------------
 2 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/src/components/molecules/NaturalmenteTecnologici/index.module.scss b/src/components/molecules/NaturalmenteTecnologici/index.module.scss
index eb80b92..f401dc6 100644
--- a/src/components/molecules/NaturalmenteTecnologici/index.module.scss
+++ b/src/components/molecules/NaturalmenteTecnologici/index.module.scss
@@ -19,22 +19,16 @@
   height: auto;
   margin: 30px 0;
   video {
+    object-fit: cover;
     width: 100%;
-    height: auto;
-    position: absolute;
-    z-index: -1;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
+    height: 100%;
+    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzU0LjUiIGhlaWdodD0iNzQuNzAxIiB2aWV3Qm94PSIwIDAgMzU0LjUgNzQuNzAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGlkPSJzdmdHcm91cCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZvbnQtc2l6ZT0iOXB0IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMG1tIiBmaWxsPSIjMDAwIiBzdHlsZT0ic3Ryb2tlOiMwMDA7c3Ryb2tlLXdpZHRoOjBtbTtmaWxsOiMwMDAiPjxwYXRoIGQ9Ik0gOTEuMyAzMi42MDEgTCA3NS41IDMyLjYwMSBMIDczLjUgNDIuMTAxIEwgODQuNSA0Mi4xMDEgTCA4NC41IDYyLjMwMSBMIDY5LjEgNjIuMzAxIEwgNjYuNSA3NC43MDEgTCA0NS45IDc0LjcwMSBMIDQ4LjUgNjIuMzAxIEwgMzQuNiA2Mi4zMDEgTCAzMiA3NC43MDEgTCAxMS41IDc0LjcwMSBMIDE0LjEgNjIuMzAxIEwgMCA2Mi4zMDEgTCAwIDQyLjEwMSBMIDE4LjUgNDIuMTAxIEwgMjAuNSAzMi42MDEgTCA2LjggMzIuNjAxIEwgNi44IDEyLjQwMSBMIDI0LjggMTIuNDAxIEwgMjcuMyAwLjcwMSBMIDQ3LjggMC43MDEgTCA0NS4zIDEyLjQwMSBMIDU5LjIgMTIuNDAxIEwgNjEuNyAwLjcwMSBMIDgyLjMgMC43MDEgTCA3OS44IDEyLjQwMSBMIDkxLjMgMTIuNDAxIEwgOTEuMyAzMi42MDEgWiBNIDE2NS4yIDMuOTAxIEwgMTY1LjIgNzQuNzAxIEwgMTQzIDc0LjcwMSBMIDExOS41IDM5LjEwMSBMIDExOS41IDc0LjcwMSBMIDk3LjMgNzQuNzAxIEwgOTcuMyAzLjkwMSBMIDExOS41IDMuOTAxIEwgMTQzIDQwLjEwMSBMIDE0MyAzLjkwMSBMIDE2NS4yIDMuOTAxIFogTSAyNTUuOCAyNi45MDEgTCAyMzQuMyAyNi45MDEgQSA0MC4yOTcgNDAuMjk3IDAgMCAxIDIzNS4wMSAyMC4zOSBRIDIzNS43MjYgMTYuNzY4IDIzNy4xMzggMTMuODEyIEEgMjIuMzI5IDIyLjMyOSAwIDAgMSAyMzguMzUgMTEuNjAxIEEgMjMuNjg2IDIzLjY4NiAwIDAgMSAyNDMuOTk3IDUuMjg4IEEgMjEuOTQxIDIxLjk0MSAwIDAgMSAyNDguMSAyLjgwMSBBIDMwLjE2IDMwLjE2IDAgMCAxIDI1OS4wNzkgMC4wNjkgQSAzNS42NTkgMzUuNjU5IDAgMCAxIDI2MS4zIDAuMDAxIEEgNDIuMjExIDQyLjIxMSAwIDAgMSAyNjguMTI4IDAuNTE1IFEgMjcxLjczMiAxLjEwNyAyNzQuNTc3IDIuMzgyIEEgMTcuNDM3IDE3LjQzNyAwIDAgMSAyODAuMDUgNi4xNTEgQSAyMC45MDggMjAuOTA4IDAgMCAxIDI4NS44MjQgMTguNzAzIEEgMjguMzQgMjguMzQgMCAwIDEgMjg2IDIxLjkwMSBBIDMxLjAzMiAzMS4wMzIgMCAwIDEgMjgwLjg4NCAzOC45IEEgMzguNzE4IDM4LjcxOCAwIDAgMSAyNzkuNTUgNDAuODUxIFEgMjczLjEgNDkuNzAxIDI2My40IDU1LjgwMSBMIDI4Ni4zIDU1LjgwMSBMIDI4Ni4zIDczLjcwMSBMIDIzNC42IDczLjcwMSBMIDIzNC42IDU3LjAwMSBBIDI0OC42NDQgMjQ4LjY0NCAwIDAgMCAyNDMuNTA4IDUwLjA1MiBRIDI0Ny42MTIgNDYuNjg4IDI1MC45ODggNDMuNTY1IEEgMTExLjEzMSAxMTEuMTMxIDAgMCAwIDI1NS44IDM4Ljg1MSBRIDI2MC40MjUgMzQuMDE5IDI2Mi4zMDcgMjkuNTU2IEEgMTUuMjcyIDE1LjI3MiAwIDAgMCAyNjMuNiAyMy42MDEgQSA4LjgwNiA4LjgwNiAwIDAgMCAyNjMuNDkyIDIyLjE3NiBRIDI2My4yNjQgMjAuNzg0IDI2Mi41NSAxOS45MDEgUSAyNjEuNSAxOC42MDEgMjU5LjggMTguNjAxIEEgMy4yNTggMy4yNTggMCAwIDAgMjU3LjE5NCAxOS44NTIgQSA1LjI2MyA1LjI2MyAwIDAgMCAyNTYuNjUgMjAuNjUxIFEgMjU1LjUgMjIuNzAxIDI1NS44IDI2LjkwMSBaIE0gMTcxLjIgMy45MDEgTCAyMzAuOCAzLjkwMSBMIDIzMC44IDIxLjUwMSBMIDIxMiAyMS41MDEgTCAyMTIgNzQuNzAxIEwgMTg5LjggNzQuNzAxIEwgMTg5LjggMjEuNTAxIEwgMTcxLjIgMjEuNTAxIEwgMTcxLjIgMy45MDEgWiBNIDMyNC45IDYzLjcwMSBMIDI5My42IDYzLjcwMSBMIDI5My42IDQ1LjIwMSBMIDMyMy40IDIuNzAxIEwgMzQ3LjMgMi43MDEgTCAzNDcuMyA0NC41MDEgTCAzNTQuNSA0NC41MDEgTCAzNTQuNSA2My43MDEgTCAzNDcuMyA2My43MDEgTCAzNDcuMyA3NC43MDEgTCAzMjQuOSA3NC43MDEgTCAzMjQuOSA2My43MDEgWiBNIDUyLjkgNDIuMTAxIEwgNTQuOSAzMi42MDEgTCA0MSAzMi42MDEgTCAzOSA0Mi4xMDEgTCA1Mi45IDQyLjEwMSBaIE0gMzI2LjcgNDQuNTAxIEwgMzI2LjcgMjguMDAxIEwgMzE1LjkgNDQuNTAxIEwgMzI2LjcgNDQuNTAxIFoiIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIvPjwvZz48L3N2Zz4=);
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    mask-position: center;
   }
 }
 
-.video {
-  -webkit-clip-path: url(#clip-00);
-  clip-path: url(#clip-00);
-  transform: translateZ(0); // just to force component to render on safari
-}
-
 .singleSectionsWrap {
   display: flex;
   flex-direction: row;
diff --git a/src/components/molecules/NaturalmenteTecnologici/index.tsx b/src/components/molecules/NaturalmenteTecnologici/index.tsx
index c5e25c3..6dd2b11 100644
--- a/src/components/molecules/NaturalmenteTecnologici/index.tsx
+++ b/src/components/molecules/NaturalmenteTecnologici/index.tsx
@@ -96,19 +96,10 @@ const Index = () => {
         <ShowOnView className={styles.singleSections}>
           <Heading text={t('EventTitle')} smaller={false} simple showOnView={false} />
           <div className={styles.videoWrap}>
-            <svg viewBox="-5 -5 364.5 84.701" preserveAspectRatio="none" clipPathUnits="objectBoundingBox">
-              <defs>
-                <clipPath id="clip-00">
-                  <path d="M 91.3 32.601 L 75.5 32.601 L 73.5 42.101 L 84.5 42.101 L 84.5 62.301 L 69.1 62.301 L 66.5 74.701 L 45.9 74.701 L 48.5 62.301 L 34.6 62.301 L 32 74.701 L 11.5 74.701 L 14.1 62.301 L 0 62.301 L 0 42.101 L 18.5 42.101 L 20.5 32.601 L 6.8 32.601 L 6.8 12.401 L 24.8 12.401 L 27.3 0.701 L 47.8 0.701 L 45.3 12.401 L 59.2 12.401 L 61.7 0.701 L 82.3 0.701 L 79.8 12.401 L 91.3 12.401 L 91.3 32.601 Z M 165.2 3.901 L 165.2 74.701 L 143 74.701 L 119.5 39.101 L 119.5 74.701 L 97.3 74.701 L 97.3 3.901 L 119.5 3.901 L 143 40.101 L 143 3.901 L 165.2 3.901 Z M 255.8 26.901 L 234.3 26.901 A 40.297 40.297 0 0 1 235.01 20.39 Q 235.726 16.768 237.138 13.812 A 22.329 22.329 0 0 1 238.35 11.601 A 23.686 23.686 0 0 1 243.997 5.288 A 21.941 21.941 0 0 1 248.1 2.801 A 30.16 30.16 0 0 1 259.079 0.069 A 35.659 35.659 0 0 1 261.3 0.001 A 42.211 42.211 0 0 1 268.128 0.515 Q 271.732 1.107 274.577 2.382 A 17.437 17.437 0 0 1 280.05 6.151 A 20.908 20.908 0 0 1 285.824 18.703 A 28.34 28.34 0 0 1 286 21.901 A 31.032 31.032 0 0 1 280.884 38.9 A 38.718 38.718 0 0 1 279.55 40.851 Q 273.1 49.701 263.4 55.801 L 286.3 55.801 L 286.3 73.701 L 234.6 73.701 L 234.6 57.001 A 248.644 248.644 0 0 0 243.508 50.052 Q 247.612 46.688 250.988 43.565 A 111.131 111.131 0 0 0 255.8 38.851 Q 260.425 34.019 262.307 29.556 A 15.272 15.272 0 0 0 263.6 23.601 A 8.806 8.806 0 0 0 263.492 22.176 Q 263.264 20.784 262.55 19.901 Q 261.5 18.601 259.8 18.601 A 3.258 3.258 0 0 0 257.194 19.852 A 5.263 5.263 0 0 0 256.65 20.651 Q 255.5 22.701 255.8 26.901 Z M 171.2 3.901 L 230.8 3.901 L 230.8 21.501 L 212 21.501 L 212 74.701 L 189.8 74.701 L 189.8 21.501 L 171.2 21.501 L 171.2 3.901 Z M 324.9 63.701 L 293.6 63.701 L 293.6 45.201 L 323.4 2.701 L 347.3 2.701 L 347.3 44.501 L 354.5 44.501 L 354.5 63.701 L 347.3 63.701 L 347.3 74.701 L 324.9 74.701 L 324.9 63.701 Z M 52.9 42.101 L 54.9 32.601 L 41 32.601 L 39 42.101 L 52.9 42.101 Z M 326.7 44.501 L 326.7 28.001 L 315.9 44.501 L 326.7 44.501 Z" />
-                </clipPath>
-              </defs>
-              <foreignObject className={styles.video} clipPath="url(#clip-00)" width="100%" height="100%">
-                <video height={500} muted autoPlay controls={false} loop playsInline poster="/images/bosco-1-low.JPG">
-                  <source src={BoscoCoste} type="video/mp4" />
-                  Your browser doesn't support video tag
-                </video>
-              </foreignObject>
-            </svg>
+            <video height={500} muted autoPlay controls={false} loop playsInline poster="/images/bosco-1-low.JPG">
+              <source src={BoscoCoste} type="video/mp4" />
+              Your browser doesn't support video tag
+            </video>
           </div>
           <p dangerouslySetInnerHTML={{ __html: t('EventDescription') }}></p>
         </ShowOnView>

From 55102273182b4211026ce964b7f5cee8d09b101a Mon Sep 17 00:00:00 2001
From: Michele Pulvirenti <pulvirentimichele00@gmail.com>
Date: Sun, 26 May 2024 19:19:48 +0200
Subject: [PATCH 5/6] Fixed poster on videos

---
 src/components/atoms/BigPictureSection/index.tsx | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/components/atoms/BigPictureSection/index.tsx b/src/components/atoms/BigPictureSection/index.tsx
index c8c7329..f001141 100644
--- a/src/components/atoms/BigPictureSection/index.tsx
+++ b/src/components/atoms/BigPictureSection/index.tsx
@@ -36,17 +36,7 @@ const Index = ({ title, text, reverse = false, images, videos }: BigPictureSecti
 
   const slides = [
     videos?.map((v, key) => (
-      <video
-        key={key}
-        className={styles.video}
-        height={500}
-        muted
-        autoPlay
-        controls={false}
-        loop
-        playsInline
-        poster="/images/bosco-1-low.JPG"
-      >
+      <video key={key} className={styles.video} height={500} muted autoPlay controls={false} loop playsInline>
         <source src={v} type="video/mp4" />
         Your browser doesn't support video tag
       </video>

From b936a5b228be76d84fb1563e7cf18b1a8a0cdbef Mon Sep 17 00:00:00 2001
From: Michele Pulvirenti <pulvirentimichele00@gmail.com>
Date: Sun, 26 May 2024 19:21:31 +0200
Subject: [PATCH 6/6] Small margin fix

---
 .../molecules/NaturalmenteTecnologici/index.module.scss         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/molecules/NaturalmenteTecnologici/index.module.scss b/src/components/molecules/NaturalmenteTecnologici/index.module.scss
index f401dc6..737305e 100644
--- a/src/components/molecules/NaturalmenteTecnologici/index.module.scss
+++ b/src/components/molecules/NaturalmenteTecnologici/index.module.scss
@@ -17,7 +17,7 @@
   position: relative;
   width: 80vw;
   height: auto;
-  margin: 30px 0;
+  margin: 0;
   video {
     object-fit: cover;
     width: 100%;