[Bug] Special:MobileOptions heading padding should be consistent

This simplifies commit 17a3b5b6b0

The top or bottom margins of contained elements will always collapse together
(per http://seifi.org/css/understanding-taming-collapsing-margins-in-css.html)

What we actually want is a margin bottom in tablet mode for Special:MobileOptions
and a padding bottom for taglines that only exists if the tagline is not empty

Bug: T202557
Change-Id: I741f08d2dec04f94b7c233a04a3fca7a065520f8

skinStyles/mobile.special.mobileoptions.styles/minerva.less

@@ -1,36 +1,21 @@
 @import '../../minerva.less/minerva.variables';
 
-.ns-special {
-	#content {
-		background: @colorGray14;
-		.pre-content, form {
-			background: #fff;
-		}
-	}
-}
-
-// T202557: This media query is for mobile devices (less wide than tablet)
-// It overrides default special page style to center the header and content properly.
-// Also it adds a 1px horizontal line as a seperator beetwen header and content
-@media all and ( max-width: ( @width-breakpoint-tablet - 1px ) ) {
-	.ns-special #content .pre-content {
-		margin: 0;
-		#section_0 {
-			padding: 34px 16px 0;
-		}
-		.tagline {
-			margin-bottom: 1px;
-			// This is needed because tagline needs to be positioned correctly
-			padding: 0 16px 16px;
-		}
-	}
-}
-
 @media all and ( min-width: @width-breakpoint-tablet ) {
 	.ns-special .pre-content {
+		background: #fff;
+		margin-bottom: 15px;
+
 		.tagline,
 		h1 {
 			margin: 0 @contentMargin;
 		}
 	}
+
+	.ns-special #content {
+		background: @colorGray14;
+
+		form {
+			background: #fff;
+		}
+	}
 }

skinStyles/mobile.special.styles/minerva.less

@@ -30,8 +30,11 @@
 
 	// Specific to override mobile display
 	.heading-holder .tagline {
-		margin-bottom: 16px;
-		padding-bottom: 16px; // Without it, margin starts right after the tagline and this feels like a bug.
+		padding-bottom: 15px;
+		// Avoid padding bottom being added on pages where there is no tagline
+		&:empty {
+			display: none;
+		}
 	}
 
 	h1,