From 196c8be8c20d56ce0c33ddfd71007473fa7fda10 Mon Sep 17 00:00:00 2001
From: Maggie Serino <7341759+mserino@users.noreply.github.com>
Date: Wed, 8 Jan 2025 20:04:55 +0100
Subject: [PATCH] Fix: zigzag direction on mobile [TMZ-289](#155)

---
 .../assets/scss/hello-plus-zigzag.scss        | 64 ++++++++++---------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/modules/content/assets/scss/hello-plus-zigzag.scss b/modules/content/assets/scss/hello-plus-zigzag.scss
index 453f2541..f76d0a90 100644
--- a/modules/content/assets/scss/hello-plus-zigzag.scss
+++ b/modules/content/assets/scss/hello-plus-zigzag.scss
@@ -138,36 +138,6 @@
 		}
 	}
 
-	&.has-direction {
-		&-start {
-			.ehp-zigzag__item-wrapper:nth-child(odd) {
-				.ehp-zigzag__item-container {
-					flex-direction: row;
-				}
-			}
-
-			.ehp-zigzag__item-wrapper:nth-child(even) {
-				.ehp-zigzag__item-container {
-					flex-direction: row-reverse;
-				}
-			}
-		}
-
-		&-end {
-			.ehp-zigzag__item-wrapper:nth-child(odd) {
-				.ehp-zigzag__item-container {
-					flex-direction: row-reverse;
-				}
-			}
-
-			.ehp-zigzag__item-wrapper:nth-child(even) {
-				.ehp-zigzag__item-container {
-					flex-direction: row;
-				}
-			}
-		}
-	}
-
 	&__text-container {
 		display: flex;
 		flex-direction: column;
@@ -278,12 +248,44 @@
 		}
 	}
 
+	@media screen and (min-width: $screen-desktop-min) {
+		&.has-direction {
+			&-start {
+				.ehp-zigzag__item-wrapper:nth-child(odd) {
+					.ehp-zigzag__item-container {
+						flex-direction: row;
+					}
+				}
+	
+				.ehp-zigzag__item-wrapper:nth-child(even) {
+					.ehp-zigzag__item-container {
+						flex-direction: row-reverse;
+					}
+				}
+			}
+	
+			&-end {
+				.ehp-zigzag__item-wrapper:nth-child(odd) {
+					.ehp-zigzag__item-container {
+						flex-direction: row-reverse;
+					}
+				}
+	
+				.ehp-zigzag__item-wrapper:nth-child(even) {
+					.ehp-zigzag__item-container {
+						flex-direction: row;
+					}
+				}
+			}
+		}
+	}
+
 	@media screen and (max-width: $screen-tablet-max) {
 		.ehp-zigzag__item-container {
 			flex-direction: column;
 		}
 
-		&.has-direction-right {
+		&.has-direction-end {
 
 			.ehp-zigzag__graphic-element-container {
 				order: 2;