feat: Add styles for ad formats

Author: manid2

assets/styles/_main.scss

@@ -482,9 +482,50 @@ hr {
 }
 
 .ads {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
   margin: $spacer-normal 0;
 
+  &.left {
+    justify-content: flex-start;
+  }
+
   @media print {
     display: none;
   }
+
+  a {
+    text-decoration: underline;
+    font-size: $font-size-smaller;
+
+    @include themed {
+      color: t($text-brighter);
+    }
+  }
+
+  &.buttons {
+    @media ($phone) {
+      flex-direction: column;
+    }
+  }
+
+  .banner {
+    margin: $spacer-normal 0;
+
+    &--desktop {
+      @media ($phone) {
+        display: none;
+      }
+    }
+
+    &--mobile {
+      display: none;
+
+      @media ($phone) {
+        display: block;
+      }
+    }
+  }
 }

assets/styles/_variables.scss

@@ -68,3 +68,8 @@ $text-links--dark: adjust-color(
 /* Media queries */
 $phone: "max-width: 684px";
 $tablet: "max-width: 900px";
+
+:root {
+  --phone: (#{$phone});
+  --tablet: (#{$tablet});
+}