Fix Media video on mobile

src/components/common/modal/modal.module.scss

@@ -2,6 +2,7 @@
 
 .modal {
   @include respond-to('mobile') {
+    min-width: unset;
     width: 90vw;
   }
 

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>

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;