From 4489929fbd0bee363464712fa9bdd59ab415ee4f Mon Sep 17 00:00:00 2001
From: SamuelmdLow <samuel.m.d.low@gmail.com>
Date: Mon, 26 Aug 2024 21:47:34 +0000
Subject: [PATCH] Small guide styling fixes

---
 .../modules/guide/2023/_article-box.scss      |  8 ++++----
 .../styles/modules/guide/2024/_article.scss   | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/ubyssey/static_src/src/styles/modules/guide/2023/_article-box.scss b/ubyssey/static_src/src/styles/modules/guide/2023/_article-box.scss
index 009362e76..8d2b5f753 100644
--- a/ubyssey/static_src/src/styles/modules/guide/2023/_article-box.scss
+++ b/ubyssey/static_src/src/styles/modules/guide/2023/_article-box.scss
@@ -77,15 +77,15 @@
       transition: 0.5s;
     }
     [name="arrow-back-circle-outline"] {
-      left: -1.5em;
+      left: 0;
     }
     [name="arrow-forward-circle-outline"] {
-      right: -1.5em;
+      right: 0;
     }
 
     &:hover {
-      margin-right: 1.5em;
-      margin-left: 1.5em;
+      padding-right: 3.5em;
+      padding-left: 3.5em;
     }
 
     &:hover .arrow {
diff --git a/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss b/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss
index e4c5bb439..9553c8339 100644
--- a/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss
+++ b/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss
@@ -13,6 +13,7 @@
 
   .header {
     margin: 2em auto;
+    padding-inline: 1em;
     max-width: 400px;
     h2 {
       text-align: center;
@@ -44,6 +45,7 @@
     }
     .header {
       margin: 1em;
+      padding: 0;
     }
   }
 }
@@ -76,6 +78,23 @@ nav.navbar {
   }
 }
 
+@media($bp-smaller-than-phablet) {
+  .vs-side-by-side {
+    .o-visual-essay__left-container {
+      position: relative;
+    }
+    .o-visual-essay__right-container {
+      margin-top: 1em;
+    }
+    .o-visual-essay__right-div {
+      margin-top: 1em;
+    }
+    .o-visual-essay__right-div:last-child {
+      margin-bottom: 1em !important;
+    }
+  }
+}
+
 .o-visual-essay__right-div {
   max-width: 600px;
 }
\ No newline at end of file