Varia: Fix padding issues in menu on mobile screens

varia/sass/components/header/_site-main-navigation.scss

@@ -99,16 +99,18 @@
 
 		& > li {
 
-			&:first-of-type > a {
-				padding-left: 0;
+			& > a {
+				@include crop-text(map-deep-get($config-header, "main-nav", "font", "line-height"));
 			}
 
-			&:last-of-type > a {
-				padding-right: 0;
-			}
+			@include media(mobile) {
+				&:first-of-type > a {
+					padding-left: 0;
+				}
 
-			& > a {
-				@include crop-text(map-deep-get($config-header, "main-nav", "font", "line-height"));
+				&:last-of-type > a {
+					padding-right: 0;
+				}
 			}
 		}
 
@@ -142,7 +144,11 @@
 		font-family: #{map-deep-get($config-header, "main-nav", "font", "family")};
 		font-size: #{map-deep-get($config-header, "main-nav", "font", "size")};
 		font-weight: #{map-deep-get($config-header, "main-nav", "font", "weight")};
-		padding: #{map-deep-get($config-header, "main-nav", "link-padding")};
+		padding: #{map-deep-get($config-header, "main-nav", "link-padding")} 0;
+
+		@include media(mobile) {
+			padding: #{map-deep-get($config-header, "main-nav", "link-padding")};
+		}
 
 		&:link,
 		&:visited {

varia/style-rtl.css

@@ -2363,14 +2363,6 @@ table th,
 	}
 }
 
-.main-navigation > div > ul > li:first-of-type > a {
-	padding-right: 0;
-}
-
-.main-navigation > div > ul > li:last-of-type > a {
-	padding-left: 0;
-}
-
 .main-navigation > div > ul > li > a {
 	line-height: 1;
 }
@@ -2390,6 +2382,15 @@ table th,
 	margin-top: -0.11em;
 }
 
+@media only screen and (min-width: 560px) {
+	.main-navigation > div > ul > li:first-of-type > a {
+		padding-right: 0;
+	}
+	.main-navigation > div > ul > li:last-of-type > a {
+		padding-left: 0;
+	}
+}
+
 .main-navigation > div > ul > li > .sub-menu {
 	margin: 0;
 	position: relative;
@@ -2419,7 +2420,14 @@ table th,
 	font-family: sans-serif;
 	font-size: 1.2rem;
 	font-weight: bold;
-	padding: 16px;
+	padding-right: 0;
+	padding-left: 0;
+}
+
+@media only screen and (min-width: 560px) {
+	.main-navigation a {
+		padding: 16px;
+	}
 }
 
 .main-navigation a:link, .main-navigation a:visited {

varia/style.css

@@ -2381,14 +2381,6 @@ table th,
 	}
 }
 
-.main-navigation > div > ul > li:first-of-type > a {
-	padding-left: 0;
-}
-
-.main-navigation > div > ul > li:last-of-type > a {
-	padding-right: 0;
-}
-
 .main-navigation > div > ul > li > a {
 	line-height: 1;
 }
@@ -2408,6 +2400,15 @@ table th,
 	margin-top: -0.11em;
 }
 
+@media only screen and (min-width: 560px) {
+	.main-navigation > div > ul > li:first-of-type > a {
+		padding-left: 0;
+	}
+	.main-navigation > div > ul > li:last-of-type > a {
+		padding-right: 0;
+	}
+}
+
 .main-navigation > div > ul > li > .sub-menu {
 	margin: 0;
 	position: relative;
@@ -2437,7 +2438,13 @@ table th,
 	font-family: sans-serif;
 	font-size: 1.2rem;
 	font-weight: bold;
-	padding: 16px;
+	padding: 16px 0;
+}
+
+@media only screen and (min-width: 560px) {
+	.main-navigation a {
+		padding: 16px;
+	}
 }
 
 .main-navigation a:link, .main-navigation a:visited {