Fix lightbox portrait mode: dynamic media data position

style/_lightbox.scss

@@ -19,6 +19,52 @@
 	width: 100%;
 	height: 100%;
 	
+	&.vertical {
+		flex-direction: column;
+		
+		.lb-dataContainer {
+			width: 100%;
+			height: 30px;
+			
+			.lb-data {
+				padding: 0.5em 0;
+				
+				.lb-details {
+					display: inline;
+					
+					.lb-caption-line {
+						padding-right: 1em;
+					}
+				}
+			
+				.lb-closeContainer {
+					display: inline;
+				}
+			}
+		}
+	}
+	&.horizontal {
+		flex-direction: row;
+		
+		.lb-dataContainer {
+			width: 200px;
+			height: 100%;
+			
+			.lb-data {
+				padding: 0.5em 0.5em 0;
+				
+				.lb-caption-line {
+					display: block;
+					margin-top: 1em;
+				}
+
+				.lb-closeContainer .lb-close {
+					margin-top: 1em;
+					float: none;
+				}
+			}
+		}
+	}
 	
 	.lb-outerContainer {
 		margin: 0;
@@ -30,6 +76,7 @@
 		
 			.lb-image {
 				image-orientation: from-image;
+				border-radius: 0;
 				border: none;
 				--translate-x: 0;
 				--translate-y: 0;
@@ -80,23 +127,17 @@
 	.lb-dataContainer {
 		margin: 0;
 		padding: 0;
-		display: inline-block;
-		vertical-align: top;
-		width: 200px;
-		max-width: 100%;
 		flex: 0 0 auto;
 		overflow: hidden;
 		
 		.lb-data {
-			padding: 1em 0 0 1em;
-		
+			text-align: left;
+			
 			.lb-details {
 				float: none;
 				
 				.lb-caption-line {
 					cursor: default;
-					display: block;
-					margin-top: 1em;
 				}
 			
 				.lb-caption-line:first-child {
@@ -104,17 +145,19 @@
 				}
 				
 				.lb-number {
-					padding: 0;
-					margin-top: 2em;
+					display: none !important;
 				}
 			}
 			.lb-closeContainer {
-				display: none !important;
-				margin-top: 2em;
+				color: white;
 				
 				.lb-close {
 					@include lightbox-icon(close);
-					float: none;
+					width: auto;
+					height: auto;
+					text-align: left;
+					@extend .fa-lg;
+					font-size: 1.3333333333em !important;
 				}
 			}
 		}