add files

assets/scss/layouts/_card.scss

@@ -0,0 +1,61 @@
+.card {
+  min-height: 100vh;
+  font-family: $sans-serif;
+  font-weight: 300;
+  background-color: #213334;
+  background-size: cover;
+  background-position: center;
+  @include responsivebackground("card-sm.jpg", "card-md.jpg", "card-lg.jpg");
+
+  .pageTitle {
+    color: $primary-color;
+    position: relative;
+    padding-top: rem(20);
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: rem(100);
+      height: rem(7);
+      background-color: $primary-color;
+      display: block;
+    }
+  }
+
+  .socialLinks__link {
+    @include button--outline();
+    font-family: $sans-serif;
+  }
+
+  main {
+    @include max(md) {
+      margin: 10%;
+    }
+
+    @include min(md) {
+      height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &__content {
+    padding: 40px;
+    background-color: white;
+    border-radius: rem(10);
+
+    @include min(md) {
+      max-width: rem(600);
+      z-index: 10;
+      position: relative;
+    }
+  }
+
+  &__image {
+    min-height: 50vh;
+    order: 1;
+  }
+}

assets/scss/layouts/_full.scss

@@ -0,0 +1,64 @@
+.full {
+  min-height: 100vh;
+  color: white;
+  font-family: $sans-serif;
+  font-weight: 300;
+  background-color: #213334;
+
+  .pageTitle {
+    // font-weight: 300;
+  }
+
+  .socialLinks__link {
+    @include button--outline(white, black);
+  }
+
+  &__image {
+    background-size: cover;
+    background-position: center;
+    @include responsivebackground("full-sm.jpg", "full-md.jpg", "full-lg.jpg");
+    min-height: 50vh;
+
+    @include min(md) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100vw;
+      height: 100vh;
+    }
+  }
+
+  main {
+    @include min(md) {
+      display: flex;
+      height: 100vh;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    &.content--left {
+      justify-content: flex-start;
+    }
+
+    &.content--center {
+      justify-content: center;
+    }
+  }
+
+  &__content {
+    padding: 20px;
+
+    @include min(md) {
+      max-width: 50vw;
+      z-index: 10;
+      position: relative;
+    }
+  }
+
+  &__image {
+    min-height: 50vh;
+    order: 1;
+  }
+}

assets/scss/layouts/_half.scss

@@ -0,0 +1,54 @@
+.half {
+  main {
+    display: flex;
+    flex-direction: column;
+
+    @include min(md) {
+      flex-direction: row;
+      height: 100vh;
+      width: 100vw;
+      align-items: stretch;
+    }
+
+    .pageTitle {
+      color: $primary-color;
+      font-weight: 300;
+    }
+
+    > div {
+      padding: 20px;
+
+      @include min(md) {
+        flex: 1;
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: center;
+        padding: $padding;
+      }
+    }
+  }
+
+  .socialLinks__link {
+    @include button--outline();
+  }
+
+  &__content {
+    order: 2;
+
+    &.half--left {
+      @include min(md) {
+        order: 1;
+        flex-basis: 0.75;
+        max-width: 40vw;
+      }
+    }
+  }
+
+  &__image {
+    min-height: 50vh;
+    order: 1;
+    background-size: cover;
+    background-position: center;
+    @include responsivebackground("half-sm.jpg", "half-md.jpg", "half-lg.jpg");
+  }
+}