(feat) Fixed spacing on main section

* Limited h1 margin
* Shared space between links and p to fit reqs (starting w/ grid gap)
* Applied similar method b/w links and image in mobile view

Finished porting to mobile.

_sass/_molecule_utils.scss

@@ -1,10 +1,6 @@
 // Utils file for molecules. Currently merged with organisms.
 
 // ------ Layout ------
-@mixin inherit-grid {
- display: grid;
- gap: inherit;
-}
 @mixin grid-col-span-h {
  grid-column: 1 / -1;
 }
@@ -27,4 +23,20 @@
  }
  }
 }
-
+// -- sizing -- margin
+@mixin rem-body-margin($bottom: true, $top: true, $lr: true) {
+ // change mquery if rem changes
+ @media (min-width: ($grid-size + 20px)) {
+ @if ($top) { 
+ // Mutually exclusive
+ margin-top: 0;
+ }
+ @if ($bottom){
+ margin-bottom: 0;
+ } 
+ @if ($lr) {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ }
+}

_sass/_organisms.scss

@@ -39,6 +39,13 @@
  'one one one one one one one three three three three three'
  'two two two two two bla bla three three three three three';
  }
+ & h1{
+ margin-top: 0; // Handled by padding.
+ margin-bottom: 0.64rem; // for p.
+ }
+ & p {
+ margin-bottom: 0.5 * $body-padding; // To complete spacing with links.
+ }
 }
 @mixin last-splash{
  padding-bottom: $body-padding * 2;
@@ -77,8 +84,10 @@ footer {
  @include rem-body-pad(false);
  transition: all 0.2s ease-in-out;
  height: max-content;
+ display: grid;
  @include grid-col-span-h;
- @include inherit-grid;
+ row-gap: $body-padding; // Min spacing.
+ column-gap: inherit;
  @include splash-area;
 }
 // select first 3 childs for style
@@ -87,6 +96,9 @@ footer {
 }
 .land_links {
  grid-area: two;
+ // Fill in rest of gap w/ image
+ margin-bottom: 2 * $body-padding;
+ @include rem-body-margin(true, false, false);
 }
 .land_image {
  grid-area: three;

_sass/primitives/_typography.scss

@@ -53,7 +53,6 @@ h5 {
  line-height: 1.3;
 }
 h1 {
- margin-top: 0;
  font-size: $title;
 }