New design

rss/css/theme.css

@@ -0,0 +1,399 @@
+/* Grid system */
+/* Breakpoints */
+/* Display types */
+/* Color palette */
+/* Spacing scale */
+/* Shadows (soft shadows) */
+/* Flex utilities */
+/* Button component variables */
+/* Typography */
+header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.7rem 2rem;
+  background-color: #ffffff;
+  align-items: center;
+  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
+  position: relative;
+  z-index: 999;
+  font-family: "Nunito", sans-serif;
+}
+header .logo {
+  width: 100px;
+  display: flex;
+  cursor: pointer;
+}
+header .logo img {
+  width: 100%;
+  height: 100%;
+}
+header nav {
+  display: flex;
+  position: relative;
+}
+header nav .menu-item {
+  color: #000000;
+  font-weight: 500;
+  margin-right: 15px;
+  display: inline-block;
+  position: relative;
+  transition: color 0.3s;
+  font-size: 16px;
+}
+header nav .menu-item.active {
+  font-weight: bold;
+}
+header nav .menu-item::after {
+  content: "";
+  position: absolute;
+  top: 120%;
+  left: 0;
+  height: 2px;
+  width: 100%;
+  background: #B54418;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s;
+}
+header nav .menu-item:hover {
+  color: #B54418;
+  cursor: pointer;
+}
+header nav .menu-item:hover::after {
+  transform: scaleX(1);
+}
+
+.home-banner {
+  height: calc(100vh - 55px);
+  padding: 50px 0;
+  display: flex;
+  background-color: #ffffff;
+  opacity: 0;
+  animation: slideUp 1s ease-in-out forwards;
+}
+@media (max-width: 768px) {
+  .home-banner {
+    height: 100vh;
+  }
+}
+.home-banner .home-banner-inner {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.home-banner .home-banner-inner .container {
+  height: 100%;
+}
+.home-banner .home-banner-inner .inner-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  height: 100%;
+}
+@media (max-width: 768px) {
+  .home-banner .home-banner-inner .inner-row {
+    flex-direction: column;
+  }
+}
+.home-banner .home-banner-inner .image-col {
+  flex: 0 0 45%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.home-banner .home-banner-inner .image-col img {
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
+}
+.home-banner .home-banner-inner .text-col {
+  flex: 0 0 40%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+}
+@media (max-width: 768px) {
+  .home-banner .home-banner-inner .text-col {
+    flex: 0 0 100%;
+    max-width: 100%;
+    text-align: center;
+    z-index: 9;
+  }
+}
+.home-banner .home-banner-inner .text-col .title {
+  font-weight: 800;
+  font-size: 3.7rem;
+  line-height: 1.2;
+  font-family: "Nunito", sans-serif;
+}
+@media (max-width: 768px) {
+  .home-banner .home-banner-inner .text-col .title {
+    font-size: 3.2rem;
+  }
+}
+.home-banner .home-banner-inner .text-col .lead {
+  font-size: 1.6rem;
+  font-weight: 400;
+}
+@media (max-width: 768px) {
+  .home-banner .home-banner-inner .text-col .lead {
+    font-size: 1.3rem;
+  }
+}
+.home-banner .home-banner-inner .text-col .cta-btn {
+  padding: 10px;
+  font-size: 1.4rem;
+}
+.home-banner .home-banner-inner .text-col .login-text {
+  display: inline-flex;
+  gap: 5px;
+  font-weight: 400;
+}
+.home-banner .home-banner-inner .text-col .login-text .login-link {
+  font-weight: 500;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.home-banner .home-banner-inner .image-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+@media (max-width: 768px) {
+  .home-banner .home-banner-inner .image-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    height: 100%;
+    z-index: 1;
+    opacity: 0.1;
+  }
+}
+.home-banner .home-banner-inner .image-wrapper img {
+  height: 100%;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+}
+
+.display-banner {
+  width: 100%;
+  padding: 120px 0px;
+}
+.display-banner.wedding-banner {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("/rss/img/wedding.jpg");
+  padding: 180px 0px;
+  background-position: center center;
+  background-size: cover;
+}
+.display-banner.moving-banner {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("/rss/img/couple.jpg");
+  background-position: center 40%;
+  background-size: cover;
+  padding: 180px 0px;
+}
+
+footer {
+  background-color: #212529;
+  color: #fff;
+  display: flex;
+  padding: 25px 0px;
+  font-size: 14px;
+  font-weight: 300;
+}
+footer .logo {
+  width: 125px;
+  cursor: pointer;
+}
+footer ul {
+  list-style: none;
+}
+
+.features-section h2 {
+  font-size: 1.8rem;
+  color: #212529;
+}
+.features-section .theme-card {
+  border-radius: 0.25rem;
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.features-section .theme-card .card-header {
+  padding: 0.5rem;
+  text-align: center;
+}
+.features-section .theme-card .card-header img {
+  width: 125px;
+  height: 125px;
+  border-radius: 50%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -o-object-fit: cover;
+     object-fit: cover;
+  margin: 0 auto;
+}
+.features-section .theme-card .card-header img.object-left {
+  -o-object-position: left center;
+     object-position: left center;
+}
+.features-section .theme-card .card-header img.object-center {
+  -o-object-position: center center;
+     object-position: center center;
+}
+.features-section .theme-card .card-header img.object-bottom {
+  -o-object-position: bottom center;
+     object-position: bottom center;
+}
+.features-section .theme-card .card-body {
+  padding: 1rem;
+  text-align: center;
+}
+
+.styled-title {
+  font-family: "Nunito", sans-serif;
+}
+.styled-title.fw-900 {
+  font-weight: 900;
+}
+.styled-title.fw-600 {
+  font-weight: 600;
+}
+
+.filter-section {
+  padding: 2rem 0;
+}
+
+.filter-card {
+  background-color: #ffffff;
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  padding: 1rem;
+  text-align: center;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  height: 100%;
+  margin: 15px 0px;
+}
+
+.filter-icon {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  color: #aa0b3d;
+}
+
+.filter-title {
+  font-size: 1.3rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: #212529;
+}
+
+.filter-text {
+  font-size: 1rem;
+  line-height: 1.4;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .filter-card {
+    margin-bottom: 1.5rem;
+  }
+  .filter-icon {
+    font-size: 2rem;
+  }
+  .filter-title {
+    font-size: 1.1rem;
+  }
+}
+.rounded-col-image {
+  height: 450px;
+  width: 450px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+@media (max-width: 1200px) {
+  .rounded-col-image {
+    width: 300px;
+    height: 300px;
+  }
+}
+@media (max-width: 920px) {
+  .rounded-col-image {
+    width: 225px;
+    height: 225px;
+  }
+}
+.rounded-col-image:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  box-shadow: inset 0px 0px 27px -5px rgb(2, 2, 2);
+  z-index: 1;
+  pointer-events: none;
+}
+.rounded-col-image img {
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: right;
+     object-position: right;
+  width: 100%;
+  height: 100%;
+}
+
+section h2 {
+  font-size: 1.8rem;
+  font-weight: 500;
+}
+section h3 {
+  font-size: 1.6rem;
+  font-weight: 500;
+}
+section p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  line-height: 1.4;
+}
+section .bolder {
+  font-weight: 600;
+}
+
+.section-animation {
+  opacity: 0; /* Start hidden */
+  transform: translateY(50px); /* Slide up from 50px below */
+  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
+}
+
+.section-animation.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Accessibility for reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .section-animation {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+@keyframes slideUp {
+  from {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}/*# sourceMappingURL=theme.css.map */

rss/css/theme.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["variables.scss","theme.scss","theme.css"],"names":[],"mappings":"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","file":"theme.css"}

rss/css/theme.scss

@@ -0,0 +1,444 @@
+@import 'variables';
+
+header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.7rem 2rem;
+    background-color: #ffffff;
+    align-items: center;
+    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
+    position: relative;
+    z-index: 999;
+    font-family: "Nunito", sans-serif;
+
+    .logo {
+        width: 100px;
+        display: flex;
+        cursor: pointer;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    nav {
+        display: flex;
+        position: relative;
+
+        .menu-item {
+            color: #000000;
+            font-weight: 500;
+            margin-right: 15px;
+            display: inline-block;
+            position: relative;
+            transition: color 0.3s;
+            font-size: 16px;
+
+            &.active {
+                font-weight: bold;
+                // color: #your-brand-color;
+            }
+
+            &::after {
+                content: "";
+                position: absolute;
+                top: 120%;
+                left: 0;
+                height: 2px;
+                width: 100%;
+                background: #B54418;
+                transform: scaleX(0);
+                transform-origin: left;
+                transition: transform 0.3s;
+            }
+
+            &:hover {
+                color: #B54418;
+                cursor: pointer;
+            }
+
+            &:hover::after {
+                transform: scaleX(1);
+            }
+        }
+    }
+}
+
+.home-banner {
+  height: calc(100vh - 55px);
+  padding: 50px 0;
+  display: flex;
+  background-color: #{map-get($colors, white)};
+  opacity: 0;
+  animation: slideUp 1s ease-in-out forwards;
+//   animation-delay: 0.2s;
+
+
+
+  @media(max-width:768px){
+    height: 100vh;
+  }
+
+  .home-banner-inner {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    
+    .container {
+        height: 100%;
+    }
+    
+    .inner-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: stretch;
+        height: 100%;
+        
+        @media(max-width:768px){
+            flex-direction: column;
+        }
+    }
+
+    .image-col {
+      flex: 0 0 45%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      img{
+        border-radius: 12px;
+        box-shadow: #{map-get($shadows, 3)};
+      }
+    }
+
+    .text-col {
+      flex: 0 0 40%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 10px;
+
+      @media(max-width: 768px){
+        flex: 0 0 100%;
+        max-width: 100%;
+        text-align: center;
+        z-index: 9;
+      }
+
+      .title{
+        font-weight: 800;
+        font-size: 3.7rem;
+        line-height: 1.2;
+        font-family: $font-family-base;
+
+        @media(max-width:768px){
+            font-size: 3.2rem;
+        }
+      }
+
+      .lead{
+        font-size: 1.6rem;
+        font-weight: 400;
+
+        @media(max-width:768px){
+            font-size: 1.3rem;
+        }
+      }
+      .cta-btn{
+        padding: 10px;
+        font-size: 1.4rem;
+      }
+      .login-text{
+        display: inline-flex;
+        gap: 5px;
+        font-weight: 400;
+        .login-link{
+            font-weight: 500;
+            text-decoration: underline;
+            cursor: pointer;
+        }
+      }
+    }
+
+    .image-wrapper {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      @media(max-width: 768px){
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 999;
+        height: 100%;
+        z-index: 1;
+        opacity: 0.1;
+      }
+
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        display: block;
+      }
+    }
+  }
+}
+
+
+
+// Banners
+.display-banner {
+    width: 100%;
+    padding: 120px 0px;
+
+    &.wedding-banner {
+        background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
+            url('/rss/img/wedding.jpg');
+        padding: 180px 0px;
+        background-position: center center;
+        background-size: cover;
+    }
+
+    &.moving-banner {
+        background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
+            url('/rss/img/couple.jpg');
+        background-position: center 40%;
+        background-size: cover;
+        padding: 180px 0px;
+    }
+}
+
+// Footer
+footer {
+    background-color: #{map-get($colors, 'dark')};
+    color: #fff;
+    display: flex;
+    padding: 25px 0px;
+    font-size: 14px;
+    font-weight: 300;
+
+    .logo {
+        width: 125px;
+        cursor: pointer;
+    }
+
+    ul {
+        list-style: none;
+    }
+}
+
+.features-section {
+
+    h2 {
+        font-size: map-get($font-sizes, xl);
+        color: map-get($colors, dark);
+    }
+
+    .theme-card {
+        border-radius: map-get($border-radius-sizes, md);
+        overflow: hidden;
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+        .card-header {
+            padding: #{map-get($spacing, "2")};
+            text-align: center;
+
+            img {
+                width: 125px;
+                height: 125px;
+                border-radius: 50%;
+                box-shadow: map-get($shadows, 2);
+                object-fit: cover;
+                margin: 0 auto;
+
+                &.object-left{
+                    object-position: left center;
+                }
+                &.object-center{
+                    object-position: center center;
+                }
+                &.object-bottom{
+                    object-position: bottom center;
+                }
+            }
+        }
+
+        .card-body {
+            padding: #{map-get($spacing, "3")};
+            text-align: center;
+        }
+    }
+}
+
+// Fix before release
+// Theme fonts
+.styled-title{
+    font-family: "Nunito", sans-serif;
+
+    &.fw-900{
+        font-weight: 900;
+    }
+
+    &.fw-600{
+        font-weight: 600;
+    }
+}
+
+
+.filter-section {
+  padding: 2rem 0;
+}
+
+.filter-card {
+  background-color: #{map-get($colors, white)};
+  border-radius: map-get($border-radius-sizes, md);
+  box-shadow: map-get($shadows, 2);
+  padding: #{map-get($spacing, "3")};
+  text-align: center;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  height: 100%;
+  margin: 15px 0px;
+}
+
+.filter-icon {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  color: #{map-get($colors, primary)};
+}
+
+.filter-title {
+  font-size: 1.3rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: map-get($colors, dark);
+}
+
+.filter-text {
+  font-size: 1rem;
+  color: map-get($colors, gray);
+  line-height: 1.4;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .filter-card {
+    margin-bottom: 1.5rem;
+  }
+  .filter-icon {
+    font-size: 2rem;
+  }
+  .filter-title {
+    font-size: 1.1rem;
+  }
+}
+
+
+
+
+
+
+
+// Images
+
+// Rounded col images
+.rounded-col-image{
+    height: 450px;
+    width: 450px;
+    border-radius: 50%;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    @media(max-width:1200px){
+        width: 300px;
+        height:300px;
+    }
+
+    @media(max-width:920px){
+        width:225px;
+        height: 225px;
+    }
+
+    &:before{
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        -webkit-box-shadow: inset 0px 0px 27px -5px rgba(2, 2, 2, 1);
+        -moz-box-shadow: inset 0px 0px 27px -5px rgba(2, 2, 2, 1);
+        box-shadow: inset 0px 0px 27px -5px rgba(2, 2, 2, 1);
+        z-index: 1;
+        pointer-events: none;
+
+    }
+
+    img{
+        object-fit: cover;
+        object-position: right;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+section{
+    h2{
+        font-size: 1.8rem;
+        font-weight: 500;
+    }
+    h3{
+        font-size: 1.6rem;
+        font-weight: 500;
+    }
+
+    p{
+        font-size: 1.2rem;
+    font-weight: 400;
+    line-height: 1.4;
+    }
+
+    .bolder{
+        font-weight: 600;
+    }
+}
+
+.section-animation {
+  opacity: 0; /* Start hidden */
+  transform: translateY(50px); /* Slide up from 50px below */
+  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
+}
+
+.section-animation.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Accessibility for reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .section-animation {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}

rss/css/variables.css

@@ -0,0 +1,9 @@
+/* Grid system */
+/* Breakpoints */
+/* Display types */
+/* Color palette */
+/* Spacing scale */
+/* Shadows (soft shadows) */
+/* Flex utilities */
+/* Button component variables */
+/* Typography *//*# sourceMappingURL=variables.css.map */

rss/css/variables.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["variables.scss"],"names":[],"mappings":"AAAA,gBAAA;AAIA,gBAAA;AAmBA,kBAAA;AAGA,kBAAA;AAoBA,kBAAA;AAGA,2BAAA;AAoBA,mBAAA;AAyBA,+BAAA;AAQA,eAAA","file":"variables.css"}

rss/css/variables.scss

@@ -0,0 +1,165 @@
+/* Grid system */
+$container-padding: 1rem;
+$grid-columns: 12;
+
+/* Breakpoints */
+$breakpoints: (
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+  xxxl: 1600px
+);
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px,
+  xxxl: 1520px
+);
+
+/* Display types */
+$display-types: block, flex, inline, inline-block, inline-flex, grid, none;
+
+/* Color palette */
+$colors: (
+  primary: #aa0b3d,
+  primary-alt: #aa0b3da8,
+  alt: #b5451896,
+  secondary: #333,
+  success: #34b97b,
+  warning: #ffc107,
+  danger: #dc3545,
+  info: #0dcaf0,
+  light: #e5e5e5,
+  dark: #212529,
+  white: #ffffff,
+  black: #000000,
+  muted: #C7C7C7,
+  accent-white: #f7f7f7,
+  accent: #08bbbb,
+  transparent: transparent
+);
+
+/* Spacing scale */
+$spacing-scale: 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem;
+
+/* Shadows (soft shadows) */
+$shadows: (
+  1: 0 1px 3px rgba(0, 0, 0, 0.12),
+  2: 0 2px 6px rgba(0, 0, 0, 0.16),
+  3: 0 4px 10px rgba(0, 0, 0, 0.18),
+  4: 0 6px 15px rgba(0, 0, 0, 0.20),
+  5: 0 10px 24px rgba(0, 0, 0, 0.22)
+);
+
+$drop-shadows: (
+  1: 0 2px 4px rgba(0, 0, 0, 0.14),
+  2: 0 4px 8px rgba(0, 0, 0, 0.18),
+  3: 0 8px 16px rgba(0, 0, 0, 0.20),
+  4: 0 12px 24px rgba(0, 0, 0, 0.22),
+  5: 0 20px 40px rgba(0, 0, 0, 0.24)
+);
+
+
+
+
+/* Flex utilities */
+$flex-directions: (
+  row: row,
+  row-reverse: row-reverse,
+  column: column,
+  column-reverse: column-reverse
+);
+
+$justify-content-values: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly
+);
+
+$align-items-values: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  baseline: baseline,
+  stretch: stretch
+);
+
+/* Button component variables */
+$btn-padding-y: 0.375rem;
+$btn-padding-x: 0.75rem;
+$btn-font-size: 1rem;
+$btn-border-radius: 0.25rem;
+$btn-border-width: 1px;
+$btn-hover-brightness: 0.9;
+
+/* Typography */
+$font-family-base: "Nunito", sans-serif;
+$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
+
+$font-sizes: (
+  xs: 0.75rem,
+  sm: 0.875rem,
+  base: 1.1rem,
+  lg: 1.35rem,
+  xl: 1.8rem,
+  xxl: 2.2rem
+);
+
+$font-weights: (
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+);
+
+$line-heights: (
+    tight: 1,
+    normal: 1.3,
+    heading: 1.5
+
+);
+
+
+$border-widths: (
+  0: 0,
+  1: 1px,
+  2: 2px,
+  3: 3px
+);
+
+$border-radius-sizes: (
+  none: 0,
+  sm: 0.125rem,
+  md: 0.25rem,
+  lg: 0.5rem,
+  xl: 1rem,
+  full: 9999px
+);
+
+$spacer: 1rem;
+$spacing: (
+    "0": 0,
+    "1": $spacer * 0.25,
+    "2": $spacer * 0.5,
+    "3": $spacer,
+    "4": $spacer * 1.5,
+    "5": $spacer * 3
+);
+
+$gutters: (
+  0: 0,
+  1: map-get($spacing, "1"),
+  2: map-get($spacing, "2"),
+  3: map-get($spacing, "3"),
+  4: map-get($spacing, "4"),
+  5: map-get($spacing, "5") 
+);