updated UI for popup window

src/styles/components/_Popup-window.scss

@@ -6,6 +6,7 @@
     margin: 0 auto;
     left: 50%;
     top: 50%;
+    max-width: 800px;
     transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
@@ -23,10 +24,22 @@
         width: 100%;
         height: 100%;
         z-index: 5;
+        max-width: unset;
     }
     
 }
 
+.popup-window-video {
+    height: unset;
+
+    @media (max-width: $desktop-breakpoint) {
+        width: 100%;
+        height: 100%;
+        z-index: 5;
+        max-width: unset;
+    }
+}
+
 .popup-window--gone {
 
     display: none;
@@ -41,6 +54,13 @@
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
+    font-size: 21px;
+    height: 35px;
+    margin-bottom: 0;
+
+    @media (max-width: $desktop-breakpoint) {
+        overflow: hidden;
+    }
 }
 
 .popup-window__subtitle {
@@ -104,14 +124,18 @@
     }
 }
 
+.popup-window__button-video {
+    margin-bottom: 14px;
+}
+
 .popup-window__image__wrapper {
-    // width: inherit;
+
     flex-direction: column-reverse;
     align-items: center;
     display: flex;
     margin-bottom: 50px;
     height: 50%;
-    width: 80%;
+    width: 38%;
     max-width: 80%;
     overflow: hidden;
     position: relative;
@@ -119,35 +143,36 @@
     max-height: 50%;
 
     @media (max-width: $desktop-breakpoint) {
-        // flex-direction: column-reverse;
-        // align-items: center;
-        // display: flex;
-        // margin-bottom: 50px;
-        // overflow: visible;
-        // // height: 65%;
-        // // width: 99%;
-        // max-width: 100%;
-        // overflow: hidden;
-        // position: relative;
-        // justify-content: center;
-        // // max-height: 50%;
-        // height: 70%;
-        // width: 100%;
-        // max-height: 70%;
 
-        flex-direction: column-reverse;
-        align-items: center;
-        display: flex;
-        margin-bottom: 50px;
-        overflow: visible;
-        /* max-width: 100%; */
-        //overflow: hidden;
-        position: relative;
-        justify-content: center;
-        height: 100vh;
-        width: 100vw;
+        width: 98%;
+        max-width: 98%;
     }
 
+    // flex-direction: column-reverse;
+    // align-items: center;
+    // display: flex;
+    // margin-bottom: 50px;
+    // height: 50%;
+    // width: 80%;
+    // max-width: 80%;
+    // overflow: hidden;
+    // position: relative;
+    // justify-content: center;
+    // max-height: 50%;
+
+    // @media (max-width: $desktop-breakpoint) {
+
+    //     flex-direction: column-reverse;
+    //     align-items: center;
+    //     display: flex;
+    //     margin-bottom: 50px;
+    //     overflow: visible;
+    //     position: relative;
+    //     justify-content: center;
+    //     height: 100vh;
+    //     width: 100vw;
+    // }
+
 }
 
 .popup-window__spinner__wrapper {
@@ -167,6 +192,39 @@
     max-height: 70%;
     max-width: 95%;
     border-radius: 3px;
+}
 
-    
+.popup-window-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+
+    @media (max-width: $desktop-breakpoint) {
+
+        flex-direction: column;
+        justify-content: center;
+    }
+}
+
+.popup-window-wrapper-video {
+    flex-direction: column;
+    justify-content: space-evenly;
+
+    @media (max-width: $desktop-breakpoint) {
+        justify-content: center;
+    }
+}
+
+.popup-file-details-title {
+    font-family: "Roboto",sans-serif;
+    font-weight: 300;
+}
+
+.popup-window-button-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }