update: style for sib-form-file on mobile

src/styles/base/form.scss

@@ -224,18 +224,18 @@ sib-form-date {
 }
 
 sib-form-file {
-  margin-top: 1.8rem;
   
   div {
     display: flex;
-    flex-direction: row-reverse;
+    flex-direction: column-reverse;
     align-items: center;
-    justify-content: flex-end;
-  
-    input[type='text'] {
-      margin-bottom: 0.8rem;
+    margin-top: 1.8rem;
+    
+    @include breakpoint(lg) {
+      flex-direction: row-reverse;
+      justify-content: flex-end;
     }
-
+  
     input[type='file'] {
       height: 0.1px;
       opacity: 0;
@@ -244,6 +244,15 @@ sib-form-file {
       width: 0.1px;
       z-index: -1;
     }
+      
+    input[type='text'] {
+      margin-bottom: 0.8rem;
+      width: 100%;
+
+      @include breakpoint(lg) {
+        width: auto;
+      }
+    }
 
     label {
       @extend .button,
@@ -251,27 +260,14 @@ sib-form-file {
       .text-uppercase,
       .button-primary,
       .bordered;
-      margin: auto 2.2rem;
-    }
-
-    input[type='file']:focus,
-    label:hover ~ input[type='file'] {
-      background-color: var(--color-secondary);
-    }
-
-    label ~ input[type='file']:focus {
-      outline: 1px dotted #000;
-      outline: -webkit-focus-ring-color auto 5px;
+      text-align: center;
+      width: 100%;
+      
+      @include breakpoint(lg) {
+        margin: auto 2.2rem;
+        width: auto;
+      }
     }
-
-  /*label {
-    align-items: baseline;
-    clear: both;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    max-width: 100%;
-  }*/
   }
 }