diff --git a/src/initialize.js b/src/initialize.js
deleted file mode 100755
index 78c91af..0000000
--- a/src/initialize.js
+++ /dev/null
@@ -1,21 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
- // window.$ = $;
-
- $('#skiplinks > a').click(function(e){
- var href = $(this).attr('href').substr(1); // remove the #
- var target = $('a[name="' + href + '"]');
- $(this).blur();
- target.focus();
- console.log('hello skiplinks');
- });
-
- // initialize the megamenu
- // $('nav#primary-nav').accessibleMegaMenu();
-
- // hack so that the megamenu doesn't show flash of css animation after the page loads.
- setTimeout(function () {
- $('body').removeClass('init');
- console.log('body initialized')
- }, 500);
-
-});
diff --git a/src/js/initialize.js b/src/js/initialize.js
new file mode 100755
index 0000000..a45e784
--- /dev/null
+++ b/src/js/initialize.js
@@ -0,0 +1,16 @@
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function() {
+
+ // require('./a11yNav');
+ // Conditional Breakpoint helper
+ if ((window.location.hostname.indexOf("localhost") > -1) || (window.location.hostname.indexOf("dev") > -1) || (window.location.hostname.indexOf("codepen") > -1)) {
+
+ let bodyElement = document.querySelector('body');
+
+ bodyElement.insertAdjacentHTML('beforeend', ``);
+ console.log('%c ✔ breakpoint helper', 'color: green');
+ }
+
+ console.log('%c ✔ Initialized app', 'color: green');
+});
diff --git a/src/partials/footer.static.hbs b/src/partials/footer.static.hbs
index a4b15e6..b40057b 100755
--- a/src/partials/footer.static.hbs
+++ b/src/partials/footer.static.hbs
@@ -1,3 +1,5 @@
{{! / #footer --}}
+
+
diff --git a/src/partials/head.static.hbs b/src/partials/head.static.hbs
index 40c3801..f68673a 100755
--- a/src/partials/head.static.hbs
+++ b/src/partials/head.static.hbs
@@ -3,7 +3,7 @@
{{#if title}}{{title}}{{else}}Brunch, with Cocktails!{{/if}}
-
-
-
-
-{{>analytics}}
\ No newline at end of file
+{{>analytics}}
diff --git a/src/stylesheets/README.md b/src/scss/README.md
similarity index 100%
rename from src/stylesheets/README.md
rename to src/scss/README.md
diff --git a/src/stylesheets/base/README.md b/src/scss/base/README.md
similarity index 100%
rename from src/stylesheets/base/README.md
rename to src/scss/base/README.md
diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss
new file mode 100755
index 0000000..abe0471
--- /dev/null
+++ b/src/scss/base/_typography.scss
@@ -0,0 +1,282 @@
+@charset "UTF-8";
+
+// -----------------------------------------------------------------------------
+// This file contains site-wide typography overrides. To modify Decanter's base
+// typography, you can do so via utilities/variables/base/_typography.scss
+// -----------------------------------------------------------------------------
+
+// Responsive Typography
+body {
+ $_root-font-size: _retrieve-decanter-setting(root-font-size);
+ @include grid-media($media-sm-max) {
+ font-size: em(16px, $_root-font-size);
+ }
+
+ @include grid-media($media-xl) {
+ font-size: em(19px, $_root-font-size);
+ }
+
+ @include grid-media($media-print) {
+ font-size: em(10px, $_root-font-size);
+ }
+}
+
+h1 {
+ @include grid-media($media-md-max) {
+ font-size: modular-scale(4);
+ letter-spacing: -1px;
+ }
+ @include grid-media($media-xs-only) {
+ letter-spacing: -.5px;
+ }
+ @include grid-media($media-lg) {
+ letter-spacing: -1.5px;
+ }
+}
+
+h2 {
+ @include grid-media($media-xs-only) {
+ font-size: modular-scale(3);
+ }
+ @include grid-media($media-md-max) {
+ letter-spacing: -1px;
+ }
+ @include grid-media($media-xs-only) {
+ letter-spacing: -.5px;
+ }
+ @include grid-media($media-lg) {
+ letter-spacing: -1px;
+ }
+}
+
+h3 {
+ @include grid-media($media-xs-only) {
+ font-size: modular-scale(2);
+ }
+}
+
+h4 {
+ @include grid-media($media-xs-only) {
+ font-size: modular-scale(1);
+ }
+}
+
+h5 {
+ @include grid-media($media-xs-only) {
+ font-size: modular-scale(0);
+ }
+}
+
+.lead{
+ @include font-size(modular-scale(1));
+ font-weight: 300;
+}
+
+.media-credit {
+ font-style: italic;
+ @extend small;
+}
+
+a {
+ &.jump-link {
+ text-decoration: none;
+
+ span.fa {
+ margin-left: .25em;
+ margin-right: .15em;
+ transition: margin .25s ease;
+ }
+
+ #{$hocus} {
+ text-decoration: underline;
+ color: color(link--active);
+
+ span.fa {
+ margin-left: .4em;
+ margin-right: 0;
+ }
+ }
+ }
+
+ &.anchor-link {
+ text-decoration: none;
+ backface-visibility: hidden;
+ span.fa {
+ position: relative;
+ margin-left: .25em;
+ transition: all .25s ease;
+ top: 0;
+ }
+
+ #{$hocus} {
+ text-decoration: underline;
+ color: color(link--active);
+
+ span.fa {
+ top: .25em;
+ }
+ }
+ }
+
+ &.anchor-link--reverse {
+ text-decoration: none;
+ backface-visibility: hidden;
+ span.fa {
+ position: relative;
+ margin-left: .25em;
+ transition: all .25s ease;
+ top: 0;
+ }
+
+ #{$hocus} {
+ text-decoration: underline;
+ color: color(link--active);
+
+ span.fa {
+ top: -.125em;
+ }
+ }
+ }
+}
+
+br.print {
+ display: none;
+ @media print {
+ display: initial;
+ }
+}
+
+main a {
+ position: relative;
+ display: inline-block;
+ z-index: 1;
+ &::after {
+ content: '';
+ position: absolute;
+ left: em(-5px);
+ width: calc(100% + #{em(10px)});
+ height: em(3px);
+ bottom: em(-3px);
+ background-color: tint(color(blue), 70%);
+ z-index: -1;
+ transition: all .15s ease-in;
+
+ @media print {
+ display: none;
+ }
+ }
+
+ &:focus {
+ outline: none;
+ text-decoration: none;
+ }
+
+ #{$hocus} {
+ text-decoration: none;
+ &::after {
+ height: em(33px);
+ background-color: tint(color(blue), 80%);
+ transition: all .15s ease-out;
+ }
+ }
+ &:active {
+ text-decoration: none;
+ &::after {
+ background-color: tint(color(blue), 40%);
+ height: em(3px);
+ transition-duration: .05s;
+ }
+ }
+}
+
+body > header {
+ a {
+ position: relative;
+
+ &:focus {
+ outline: tint(color(blue), 80%);
+ }
+ &::before {
+ content: '';
+ position: absolute;
+ left: em(-5px);
+ width: calc(100% + #{em(10px)});
+ height: em(3px);
+ top: em(-30px);
+ background-color: tint(color(blue), 70%);
+ z-index: -1;
+ transition: all .2s ease-in;
+
+ @media print {
+ display: none;
+ }
+ }
+ #{$hocus} {
+ &::before {
+ height: em(24px);
+ transition: all .2s ease-out;
+ }
+ }
+ &:active {
+ &::before {
+ height: em(56px);
+ transition-duration: .05s;
+ background-color: tint(color(blue), 80%);
+ }
+ }
+ }
+
+ #site-name {
+ &::before {
+ top:em(-12px);
+ }
+
+ #{$hocus} {
+ &::before {
+ height: em(18px, modular-scale(2));
+ }
+ }
+
+ &:active {
+ &::before {
+ height: em(58px, modular-scale(2));
+ }
+ }
+ }
+}
+
+hr {
+ border-top: 0;
+ border-right: 0;
+ border-bottom: $base-border;
+ border-left: 0;
+ margin: modular-scale(1) 0;
+}
+
+%fancyhover {
+ text-decoration: none;
+ color: color(link);
+ position: relative;
+
+ &::before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 3px;
+ bottom: -8px;
+ left: 0;
+ background-color: color(link--active);
+ visibility: hidden;
+ transform: scaleX(0);
+ transition: all 0.3s ease-in-out 0s;
+ z-index: 1;
+ }
+
+ #{$hocus} {
+ text-decoration: none;
+ &::before {
+ visibility: visible;
+ transform: scaleX(1);
+ }
+ }
+}
diff --git a/src/stylesheets/components/README.md b/src/scss/components/README.md
similarity index 100%
rename from src/stylesheets/components/README.md
rename to src/scss/components/README.md
diff --git a/src/stylesheets/layout/README.md b/src/scss/layout/README.md
similarity index 100%
rename from src/stylesheets/layout/README.md
rename to src/scss/layout/README.md
diff --git a/src/stylesheets/layout/_footer.scss b/src/scss/layout/_footer.scss
similarity index 100%
rename from src/stylesheets/layout/_footer.scss
rename to src/scss/layout/_footer.scss
diff --git a/src/stylesheets/layout/_header.scss b/src/scss/layout/_header.scss
similarity index 100%
rename from src/stylesheets/layout/_header.scss
rename to src/scss/layout/_header.scss
diff --git a/src/stylesheets/layout/_layout.scss b/src/scss/layout/_layout.scss
similarity index 84%
rename from src/stylesheets/layout/_layout.scss
rename to src/scss/layout/_layout.scss
index 6126748..f3bbfd6 100755
--- a/src/stylesheets/layout/_layout.scss
+++ b/src/scss/layout/_layout.scss
@@ -29,4 +29,11 @@ main {
[tabindex="-1"]:focus {
outline: 0;
-}
\ No newline at end of file
+}
+
+#breakpoint-helper {
+ @include breakpoint-helper;
+ @media print {
+ display: none!important;
+ }
+}
diff --git a/src/stylesheets/layout/_navigation.scss b/src/scss/layout/_navigation.scss
similarity index 100%
rename from src/stylesheets/layout/_navigation.scss
rename to src/scss/layout/_navigation.scss
diff --git a/src/stylesheets/main.scss b/src/scss/main.scss
similarity index 100%
rename from src/stylesheets/main.scss
rename to src/scss/main.scss
diff --git a/src/stylesheets/pages/README.md b/src/scss/pages/README.md
similarity index 100%
rename from src/stylesheets/pages/README.md
rename to src/scss/pages/README.md
diff --git a/src/stylesheets/pages/_examples.scss b/src/scss/pages/_examples.scss
similarity index 100%
rename from src/stylesheets/pages/_examples.scss
rename to src/scss/pages/_examples.scss
diff --git a/src/stylesheets/pages/_home.scss b/src/scss/pages/_home.scss
similarity index 100%
rename from src/stylesheets/pages/_home.scss
rename to src/scss/pages/_home.scss
diff --git a/src/stylesheets/pages/_readme.scss b/src/scss/pages/_readme.scss
similarity index 100%
rename from src/stylesheets/pages/_readme.scss
rename to src/scss/pages/_readme.scss
diff --git a/src/stylesheets/themes/README.md b/src/scss/themes/README.md
similarity index 100%
rename from src/stylesheets/themes/README.md
rename to src/scss/themes/README.md
diff --git a/src/stylesheets/themes/_default.scss b/src/scss/themes/_default.scss
similarity index 100%
rename from src/stylesheets/themes/_default.scss
rename to src/scss/themes/_default.scss
diff --git a/src/stylesheets/utilities/README.md b/src/scss/utilities/README.md
similarity index 100%
rename from src/stylesheets/utilities/README.md
rename to src/scss/utilities/README.md
diff --git a/src/stylesheets/utilities/_breakpoint-helper.scss b/src/scss/utilities/_breakpoint-helper.scss
similarity index 100%
rename from src/stylesheets/utilities/_breakpoint-helper.scss
rename to src/scss/utilities/_breakpoint-helper.scss
diff --git a/src/stylesheets/utilities/_helpers.scss b/src/scss/utilities/_helpers.scss
similarity index 100%
rename from src/stylesheets/utilities/_helpers.scss
rename to src/scss/utilities/_helpers.scss
diff --git a/src/stylesheets/utilities/_placeholders.scss b/src/scss/utilities/_placeholders.scss
similarity index 100%
rename from src/stylesheets/utilities/_placeholders.scss
rename to src/scss/utilities/_placeholders.scss
diff --git a/src/scss/utilities/variables/_breakpoints.scss b/src/scss/utilities/variables/_breakpoints.scss
new file mode 100644
index 0000000..69a0f68
--- /dev/null
+++ b/src/scss/utilities/variables/_breakpoints.scss
@@ -0,0 +1,157 @@
+@charset 'UTF-8';
+
+////
+/// Breakpoints
+////
+
+// Breakpoint Boundaries
+// @type length
+// These correspond to the Bootstrap 4 Responsive Breakpoints
+
+// Lower boundaries
+// ----------------
+
+/// Screen XS Min
+$screen-xs-min: 0px;
+
+/// Screen SM Min
+$screen-sm-min: 576px;
+
+/// Screen MD Min
+$screen-md-min: 768px;
+
+/// Screen LG Min
+$screen-lg-min: 1024px;
+
+/// Screen XL Min
+$screen-xl-min: _retrieve-decanter-setting(max-container-width);
+
+// Upper boundaries
+// ----------------
+
+/// Screen XS Max
+$screen-xs-max: $screen-sm-min - 1px;
+
+/// Screen SM Max
+$screen-sm-max: $screen-md-min - 1px;
+
+/// Screen MD Max
+$screen-md-max: $screen-lg-min - 1px;
+
+/// Screen LG Max
+$screen-lg-max: $screen-xl-min - 1px;
+
+/// Custom neat grids:
+
+/// Media XS only
+$media-xs: (
+ media: $screen-xs-min,
+);
+
+$media-xs-only: (
+ media: 'only screen and (max-width: #{$screen-xs-max})',
+);
+
+$media-xs-max: (
+ media: 'only screen and (max-width: #{$screen-xs-max})',
+);
+
+/// Media SM
+$media-sm: (
+ media: $screen-sm-min,
+);
+
+/// Media SM only
+$media-sm-only: (
+ media: 'only screen and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})',
+);
+
+/// Media SM max
+$media-sm-max: (
+ media: 'only screen and (max-width: #{$screen-sm-max})',
+);
+
+/// Media MD
+$media-md: (
+ media: $screen-md-min,
+);
+
+/// Media MD only
+$media-md-only: (
+ media: 'only screen and (min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})',
+);
+
+/// Media MD max
+$media-md-max: (
+ media: 'only screen and (max-width: #{$screen-md-max})',
+);
+
+/// Media LG
+$media-lg: (
+ gutter: 30px,
+ media: $screen-lg-min,
+);
+
+/// Media LG only
+$media-lg-only: (
+ gutter: 30px,
+ media: 'only screen and (min-width: #{$screen-lg-min}) and (max-width: #{$screen-lg-max})',
+);
+
+/// Media LG max
+$media-lg-max: (
+ gutter: 30px,
+ media: 'only screen and (max-width: #{$screen-lg-max})',
+);
+
+/// Media XL
+$media-xl: (
+ gutter: 35px,
+ media: $screen-xl-min,
+);
+
+/// Custom mobile nav grids
+$media-mobile-nav: (
+ gutter: 0px,
+ media: 'only screen and (max-width: #{$screen-md-max})',
+);
+/// Custom mobile nav grids
+$media-xs-mobile-nav: (
+ gutter: 0px,
+ media: 'only screen and (max-width: #{$screen-xs-max}) and (orientation: portrait)'
+);
+
+/// Media print
+$media-print: (
+ gutter: .25in,
+ media: 'only print',
+);
+
+body::before {
+ display: none;
+ content: "unknown";
+
+ @media screen {
+ content: "screen";
+ }
+
+ @media print {
+ content: "print";
+ }
+
+ @include grid-media($media-xs-only) {
+ content: "xs";
+ }
+ @include grid-media($media-sm-only) {
+ content: "sm";
+ }
+ @include grid-media($media-md-only) {
+ content: "md";
+ }
+ @include grid-media($media-lg-only) {
+ content: "lg";
+ }
+ @include grid-media($media-xl) {
+ content: "xl";
+ }
+}
diff --git a/src/stylesheets/utilities/variables/_color.scss b/src/scss/utilities/variables/_color.scss
similarity index 100%
rename from src/stylesheets/utilities/variables/_color.scss
rename to src/scss/utilities/variables/_color.scss
diff --git a/src/stylesheets/utilities/variables/_containers.scss b/src/scss/utilities/variables/_containers.scss
similarity index 100%
rename from src/stylesheets/utilities/variables/_containers.scss
rename to src/scss/utilities/variables/_containers.scss
diff --git a/src/scss/utilities/variables/_global-settings.scss b/src/scss/utilities/variables/_global-settings.scss
new file mode 100644
index 0000000..9f8c6eb
--- /dev/null
+++ b/src/scss/utilities/variables/_global-settings.scss
@@ -0,0 +1,16 @@
+@charset "UTF-8";
+
+$decanter-settings: (
+ // Configure global units
+ root-font-size: 10px,
+ base-font-size: 18px,
+ // Configure Bourbon Modular Scale
+ modular-scale-ratio: 1.25,
+ // Configure Default Neat Grid
+ grid-columns: 12,
+ gutter: 20px,
+ // Configure Decanter Functions and settings
+ max-container-width: 1500px,
+ breakpoint-helper: true,
+ breakpoint-helper-selector: '.bp-helper #breakpoint-helper',
+);
diff --git a/src/stylesheets/utilities/variables/_typography.scss b/src/scss/utilities/variables/_typography.scss
similarity index 100%
rename from src/stylesheets/utilities/variables/_typography.scss
rename to src/scss/utilities/variables/_typography.scss
diff --git a/src/stylesheets/utilities/variables/_variables.scss b/src/scss/utilities/variables/_variables.scss
similarity index 100%
rename from src/stylesheets/utilities/variables/_variables.scss
rename to src/scss/utilities/variables/_variables.scss
diff --git a/src/stylesheets/base/_typography.scss b/src/stylesheets/base/_typography.scss
deleted file mode 100755
index eeead9b..0000000
--- a/src/stylesheets/base/_typography.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@charset "UTF-8";
-
-// -----------------------------------------------------------------------------
-// This file contains Site-wide typography
-// -----------------------------------------------------------------------------
-body {
- color: color(text);
- font-family: $base-font-family;
- line-height: $base-line-height;
- @include font-size($base-font-size, $root-font-size);
-
- // Responsive font sizes:
- @include grid-media($media-sm-max) {
- @include font-size(16px, $root-font-size)
- }
-
- @include grid-media($media-xl) {
- @include font-size(19px, $root-font-size)
- }
-
- @include grid-media($media-print) {
- @include font-size(12px, $root-font-size)
- }
-}
-
-#{$all-headlines} {
- font-family: $heading-font-family;
- line-height: $heading-line-height;
- margin: modular-scale(0) 0 modular-scale(-4);
- font-weight: 300;
- text-align: center;
-}
-
-h1 {
- @include font-size(modular-scale(4))
- @include grid-media($media-sm) {
- @include font-size(modular-scale(5));
- }
- margin-top: 0;
-}
-
-h2 {
- @include font-size(modular-scale(3))
- @include grid-media($media-sm) {
- @include font-size(modular-scale(4));
- }
-}
-
-h3 {
- @include font-size(modular-scale(2))
- @include grid-media($media-sm) {
- @include font-size(modular-scale(3));
- }
-}
-
-h4 {
- @include font-size(modular-scale(1))
- @include grid-media($media-sm) {
- @include font-size(modular-scale(2));
- }
-}
-
-h5 {
- @include font-size(modular-scale(0))
- @include grid-media($media-sm) {
- @include font-size(modular-scale(1));
- }
-}
-
-h6 {
- @include font-size(modular-scale(0));
-}
-
-p {
- margin: 0 0 modular-scale(1);
-}
-
-.meta {
- text-align: center;
- font-weight: 300;
- color: color(action);
- font-size: modular-scale(1);
-}
diff --git a/src/stylesheets/utilities/variables/_global-settings.scss b/src/stylesheets/utilities/variables/_global-settings.scss
deleted file mode 100644
index 1e47647..0000000
--- a/src/stylesheets/utilities/variables/_global-settings.scss
+++ /dev/null
@@ -1,175 +0,0 @@
-@charset "UTF-8";
-
-/// Root font size in pixels. Used for converting rem to pixels.
-///
-/// @type length
-///
-/// @group settings
-$root-font-size: 10px;
-
-
-/// Base font size in pixels. Used for converting between em and absolute lengths.
-/// @type length
-///
-/// @group settings
-$base-font-size: 18px;
-
-
-/// @name Bourbon Settings
-///
-/// @type map
-///
-/// @property {color} contrast-switch-dark-color [#000]
-/// Global dark color for the `contrast-switch` function.
-///
-/// @property {color} contrast-switch-light-color [#fff]
-/// Global light color for the `contrast-switch` function.
-///
-/// @property {list} global-font-file-formats [("ttf", "woff2", "woff")]
-/// Global font file formats for the `font-face` mixin.
-///
-/// @property {number (with unit)} modular-scale-base [1em]
-/// Global base value for the `modular-scale` function.
-///
-/// @property {number (unitless)} modular-scale-ratio [$major-third (1.25)]
-/// Global base ratio for the `modular-scale` function.
-///
-/// @property {boolean} rails-asset-pipeline [false]
-/// Set this to `true` when using the Rails Asset Pipeline and Bourbon will
-/// write asset paths using
-/// [sass-rails’ asset helpers](https://github.com/rails/sass-rails#asset-helpers).
-///
-/// @example scss
-/// $bourbon: (
-/// "contrast-switch-dark-color": #000,
-/// "contrast-switch-light-color": #fff,
-/// "global-font-file-formats": ("ttf", "woff2", "woff"),
-/// "modular-scale-base": 1em,
-/// "modular-scale-ratio": $major-third,
-/// "rails-asset-pipeline": false,
-/// );
-///
-/// @group settings
-$bourbon: (
- "modular-scale-ratio": 1.25,
-);
-
-
-/// Max-container width. Edge-to-edge. Gutters are calculated inside the max-width.
-/// This is also used to generate our XL breakpoint.
-/// @type length (with unit)
-///
-/// @group settings
-$max-container-width: 1200px;
-
-
-/// Gutter
-///
-/// @type length (with unit)
-///
-/// The space on the left and right of grid elements
-///
-/// @group settings
-$gutter: 20px;
-
-
-/// Grid Columns
-///
-/// @type number (unitless)
-///
-/// How many columns in a grid
-///
-/// @group settings
-$grid-columns: 12;
-
-/// This variable is a sass map that overrides Neat's default grid settings.
-/// Use this to define your project's grid properties incluting gutters and
-/// total column count.
-///
-/// @type map
-///
-/// @name Neat grid
-///
-/// @property {number (unitless)} columns [12]
-/// Default number of the total grid columns.
-///
-/// @property {number (with unit)} gutter [20px]
-/// Default grid gutter width between columns.
-///
-/// @property {string | number (with unit)} media [null]
-/// Grid media query.
-///
-/// @property {color} color [rgba(#00d4ff, 0.25)]
-/// Default visual grid color.
-///
-/// @example scss
-/// $neat-grid: (
-/// columns: 12,
-/// gutter: 20px,
-/// );
-///
-/// @group settings
-$neat-grid: (
- columns: $grid-columns,
- gutter: $gutter,
- media: null,
- color: rgba(#00d4ff, 0.25),
- direction: ltr,
-);
-
-/// Screen XS Min
-$screen-xs-min: 0px !default;
-
-/// Screen SM Min
-$screen-sm-min: 576px !default;
-
-/// Screen MD Min
-$screen-md-min: 768px !default;
-
-/// Screen LG Min
-$screen-lg-min: 992px !default;
-
-/// Screen XL Min
-$screen-xl-min: $max-container-width !default;
-
-
-
-// Upper boundaries
-// ----------------
-/// Screen LG Max
-$screen-lg-max: $screen-xl-min - 1px !default;
-
-/// Media LG
-$media-lg: (
- columns: 12,
- gutter: 30px,
- media: $screen-lg-min,
-) !default;
-
-/// Media LG only
-$media-lg-only: (
- columns: 12,
- gutter: 30px,
- media: 'only screen and (min-width: #{$screen-lg-min}) and (max-width: #{$screen-lg-max})',
-) !default;
-
-/// Media LG max
-$media-lg-max: (
- columns: 12,
- gutter: 30px,
- media: 'only screen and (max-width: #{$screen-lg-max})',
-) !default;
-
-/// Media XL
-$media-xl: (
- columns: 12,
- gutter: 30px,
- media: $screen-xl-min,
-) !default;
-
-/// Media XL
-$media-xl: (
- columns: 12,
- gutter: 35px,
- media: $screen-xl-min,
-) !default;
\ No newline at end of file