From 6fa953175835a3f29144a4623288a8631aab6b3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?= <fedealvarezcampos@gmail.com>
Date: Thu, 26 May 2022 23:16:37 +0200
Subject: [PATCH] Fix Media video on mobile

---
 src/components/common/modal/modal.module.scss          |  1 +
 src/components/sections/community/socials/index.tsx    | 10 ++++++++--
 .../sections/community/socials/socials.module.scss     |  8 ++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/common/modal/modal.module.scss b/src/components/common/modal/modal.module.scss
index 3a9e82d..3685142 100644
--- a/src/components/common/modal/modal.module.scss
+++ b/src/components/common/modal/modal.module.scss
@@ -2,6 +2,7 @@
 
 .modal {
   @include respond-to('mobile') {
+    min-width: unset;
     width: 90vw;
   }
 
diff --git a/src/components/sections/community/socials/index.tsx b/src/components/sections/community/socials/index.tsx
index e5679b8..19776e6 100644
--- a/src/components/sections/community/socials/index.tsx
+++ b/src/components/sections/community/socials/index.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import Link from 'next/link'
 
 import Line from '~/components/icons/line'
@@ -49,11 +50,16 @@ const Socials = ({ data, alternative }: Props) => {
         />
         <div>
           <div className={s['header']}>
-            <Heading as="h2" variant="xl" centered={false}>
+            <Heading
+              as="h2"
+              variant="xl"
+              className={clsx(s['heading'], alternative && s.alt_heading)}
+              centered={false}
+            >
               {alternative ? data?.socialsHeadingAlt : data?.socialsHeading}
             </Heading>
           </div>
-          <Line className={s['line']} height={144} />
+          {!alternative && <Line className={s['line']} height={144} />}
         </div>
         <div className={s['icons__container']}>
           <span>{data?.socialsLine}</span>
diff --git a/src/components/sections/community/socials/socials.module.scss b/src/components/sections/community/socials/socials.module.scss
index 5099b1d..bb26e77 100644
--- a/src/components/sections/community/socials/socials.module.scss
+++ b/src/components/sections/community/socials/socials.module.scss
@@ -34,6 +34,14 @@
   flex-direction: column;
   width: 100%;
 
+  .alt_heading {
+    @include respond-to('mobile') {
+      width: 80%;
+      max-width: tovw(200px, 'default', 200px);
+      margin: auto;
+    }
+  }
+
   h2 {
     @include respond-to('mobile') {
       text-align: center;