Fix website styling bugs caused by Safari

website/sass/base.scss

@@ -399,7 +399,8 @@ summary {
 .image-comparison {
 	position: relative;
 	touch-action: pan-y pinch-zoom;
-	
+	max-width: Min(100%, 512px);
+
 	.crop-container {
 		height: 100%;
 		
@@ -415,10 +416,16 @@ summary {
 			}
 		}
 
-		&.crop-container.crop-container img {
-			display: block;
-			width: auto;
-			height: 100%;
+		&.crop-container.crop-container {
+			img {
+				display: block;
+				width: auto;
+				height: 100%;
+			}
+
+			&:first-child img {
+				width: 100%;
+			}
 		}
 	}
 
@@ -898,7 +905,6 @@ hr,
 			padding: 16px;
 			gap: 16px;
 			background: rgba(0, 0, 0, 0.0625);
-			// TODO: Look into maybe switching this approach to https://developer.mozilla.org/en-US/docs/Web/CSS/column-count
 			// Half width, minus own padding on both sides, minus half a gap
 			flex: 1 0 calc(50% - (16px * 2) - (16px / 2));
 

website/sass/blog.scss

@@ -81,6 +81,17 @@
 				display: -webkit-box;
 				-webkit-box-orient: vertical;
 				-webkit-line-clamp: 3;
+
+				// Safari workaround: https://stackoverflow.com/a/72170897/775283
+				// There is still an issue where the ellipsis is rendered inside the text but there doesn't appear to be a fix, or even a way to disable the ellipsis in Safari
+				p {
+					display: inline;
+
+					&::after {
+						content: "\A\A"; // Double new line
+						white-space: pre;
+					}
+				}
 			}
 		}
 

website/sass/index.scss

@@ -151,8 +151,12 @@
 				vertical-align: top;
 			}
 
-			span {
+			p {
+				display: flex;
+				flex-direction: column;
+				max-width: 300px;
 				margin-left: 40px;
+				text-align: left;
 			}
 		}
 	}
@@ -203,11 +207,6 @@
 		}
 	}
 
-	.image-comparison {
-		aspect-ratio: 1;
-		max-width: Min(100%, 512px);
-	}
-
 	// #imaginate-creative-concepts-carousel {
 	// 	margin-top: 20px;