Issue with utilities/_spacing.scss – Missing CSS Declarations on Npm run build

[nextader]

Hello,

There seems to be a malfunction with the utilities/_spacing.scss file. When running npm start built, the generated CSS only includes the .u-margin-bottom-sm { ... } declaration, but no other variations as expected for:
• .u-margin-top
• .u-margin-bottom
• .u-margin-left
• .u-margin-right
• Media query versions

Any idea what might be causing this?

Thanks!

_spacing.scss

$spacing-directions: (
    null:          null,
    '-top':        '-top',
    '-right':      '-right',
    '-bottom':     '-bottom',
    '-left':       '-left',
    '-x':          '-left' '-right',
    '-y':          '-top'  '-bottom',
) !default;

$spacing-properties: (
    'padding': 'padding',
    'margin':  'margin',
) !default;

$spacing-sizes: join($spacings, (
    null:       var(--grid-gutter),
    'none':    0
));

@each $breakpoint, $mediaquery in $breakpoints {
    @each $property-namespace, $property in $spacing-properties {
        @each $direction-namespace, $directions in $spacing-directions {
            @each $size-namespace, $size in $spacing-sizes {

                // Prepend "-" to spacing sizes if not null
                $size-namespace: if($size-namespace != null, "-" + $size-namespace, $size-namespace);

                // Base class
                $base-class: ".u-" + #{$property-namespace}#{$direction-namespace}#{$size-namespace};

                // Spacing without media query
                @if $breakpoint == "xs" {
                    #{$base-class} {
                        @each $direction in $directions {
                            #{$property}#{$direction}: $size !important;
                        }
                    }
                }

                // Spacing min-width breakpoints '@from-*'
                #{$base-class}\@from-#{$breakpoint} {
                    @media #{mq-min($breakpoint)} {
                        @each $direction in $directions {
                            #{$property}#{$direction}: $size !important;
                        }
                    }
                }

                // Spacing max-width breakpoints @to-*'
                #{$base-class}\@to-#{$breakpoint} {
                    @media #{mq-max($breakpoint)} {
                        @each $direction in $directions {
                            #{$property}#{$direction}: $size !important;
                        }
                    }
                }
            }
        }
    }
}

When running npm run build, output only this :

.u-margin-bottom-sm{margin-bottom:clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important}

When running npm run start, output :

@media (min-width: 340px) {
  .u-margin-gutter\@from-2xs {
    margin: var(--grid-gutter) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-gutter\@to-2xs {
    margin: var(--grid-gutter) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-2xs\@from-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-2xs\@to-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-xs\@from-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-xs\@to-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-sm\@from-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-sm\@to-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-md\@from-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-md\@to-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-lg\@from-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-lg\@to-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-xl\@from-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-xl\@to-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-2xl\@from-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-2xl\@to-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-3xl\@from-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-3xl\@to-2xs {
    margin: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin\@from-2xs {
    margin: var(--grid-gutter) !important;
  }
}

@media (max-width: 339px) {
  .u-margin\@to-2xs {
    margin: var(--grid-gutter) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-none\@from-2xs {
    margin: 0 !important;
  }
}

@media (max-width: 339px) {
  .u-margin-none\@to-2xs {
    margin: 0 !important;
  }
}

@media (min-width: 340px) {
  .u-margin-top-gutter\@from-2xs {
    margin-top: var(--grid-gutter) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-top-gutter\@to-2xs {
    margin-top: var(--grid-gutter) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-top-2xs\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-top-2xs\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-top-xs\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-top-xs\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-top-sm\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-top-sm\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-top-md\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-top-md\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-top-lg\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-top-lg\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-top-xl\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-top-xl\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-top-2xl\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-top-2xl\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-top-3xl\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-top-3xl\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-top\@from-2xs {
    margin-top: var(--grid-gutter) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-top\@to-2xs {
    margin-top: var(--grid-gutter) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-top-none\@from-2xs {
    margin-top: 0 !important;
  }
}

@media (max-width: 339px) {
  .u-margin-top-none\@to-2xs {
    margin-top: 0 !important;
  }
}

@media (min-width: 340px) {
  .u-margin-right-gutter\@from-2xs {
    margin-right: var(--grid-gutter) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-right-gutter\@to-2xs {
    margin-right: var(--grid-gutter) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-right-2xs\@from-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-right-2xs\@to-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-right-xs\@from-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-right-xs\@to-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-right-sm\@from-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-right-sm\@to-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-right-md\@from-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-right-md\@to-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-right-lg\@from-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-right-lg\@to-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-right-xl\@from-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-right-xl\@to-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-right-2xl\@from-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-right-2xl\@to-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-right-3xl\@from-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-right-3xl\@to-2xs {
    margin-right: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-right\@from-2xs {
    margin-right: var(--grid-gutter) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-right\@to-2xs {
    margin-right: var(--grid-gutter) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-right-none\@from-2xs {
    margin-right: 0 !important;
  }
}

@media (max-width: 339px) {
  .u-margin-right-none\@to-2xs {
    margin-right: 0 !important;
  }
}

@media (min-width: 340px) {
  .u-margin-bottom-gutter\@from-2xs {
    margin-bottom: var(--grid-gutter) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-bottom-gutter\@to-2xs {
    margin-bottom: var(--grid-gutter) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-bottom-2xs\@from-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-bottom-2xs\@to-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-bottom-xs\@from-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-bottom-xs\@to-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-bottom-sm\@from-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-bottom-sm\@to-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-bottom-md\@from-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-bottom-md\@to-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-bottom-lg\@from-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-bottom-lg\@to-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-bottom-xl\@from-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-bottom-xl\@to-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-bottom-2xl\@from-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-bottom-2xl\@to-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-bottom-3xl\@from-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-bottom-3xl\@to-2xs {
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-bottom\@from-2xs {
    margin-bottom: var(--grid-gutter) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-bottom\@to-2xs {
    margin-bottom: var(--grid-gutter) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-bottom-none\@from-2xs {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 339px) {
  .u-margin-bottom-none\@to-2xs {
    margin-bottom: 0 !important;
  }
}

@media (min-width: 340px) {
  .u-margin-left-gutter\@from-2xs {
    margin-left: var(--grid-gutter) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-left-gutter\@to-2xs {
    margin-left: var(--grid-gutter) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-left-2xs\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-left-2xs\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-left-xs\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-left-xs\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-left-sm\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-left-sm\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-left-md\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-left-md\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-left-lg\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-left-lg\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-left-xl\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-left-xl\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-left-2xl\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-left-2xl\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-left-3xl\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-left-3xl\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-left\@from-2xs {
    margin-left: var(--grid-gutter) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-left\@to-2xs {
    margin-left: var(--grid-gutter) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-left-none\@from-2xs {
    margin-left: 0 !important;
  }
}

@media (max-width: 339px) {
  .u-margin-left-none\@to-2xs {
    margin-left: 0 !important;
  }
}

@media (min-width: 340px) {
  .u-margin-x-gutter\@from-2xs {
    margin-left: var(--grid-gutter) !important;
    margin-right: var(--grid-gutter) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-x-gutter\@to-2xs {
    margin-left: var(--grid-gutter) !important;
    margin-right: var(--grid-gutter) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-x-2xs\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-x-2xs\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-x-xs\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-x-xs\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-x-sm\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-x-sm\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-x-md\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-x-md\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-x-lg\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-x-lg\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-x-xl\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-x-xl\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-x-2xl\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-x-2xl\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-x-3xl\@from-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-x-3xl\@to-2xs {
    margin-left: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
    margin-right: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-x\@from-2xs {
    margin-left: var(--grid-gutter) !important;
    margin-right: var(--grid-gutter) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-x\@to-2xs {
    margin-left: var(--grid-gutter) !important;
    margin-right: var(--grid-gutter) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-x-none\@from-2xs {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 339px) {
  .u-margin-x-none\@to-2xs {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 340px) {
  .u-margin-y-gutter\@from-2xs {
    margin-top: var(--grid-gutter) !important;
    margin-bottom: var(--grid-gutter) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-y-gutter\@to-2xs {
    margin-top: var(--grid-gutter) !important;
    margin-bottom: var(--grid-gutter) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-y-2xs\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-y-2xs\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-2xs-mobile)), var(--spacing-2xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xs-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-y-xs\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-y-xs\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-xs-mobile)), var(--spacing-xs-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xs-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-y-sm\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-y-sm\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-sm-mobile)), var(--spacing-sm-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-sm-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-y-md\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-y-md\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-md-mobile)), var(--spacing-md-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-md-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-y-lg\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-y-lg\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-lg-mobile)), var(--spacing-lg-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-lg-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-y-xl\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-y-xl\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-xl-mobile)), var(--spacing-xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-y-2xl\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-y-2xl\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-2xl-mobile)), var(--spacing-2xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-2xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-y-3xl\@from-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-y-3xl\@to-2xs {
    margin-top: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
    margin-bottom: clamp(calc(0.0625rem * var(--spacing-3xl-mobile)), var(--spacing-3xl-desktop) / 14.4 * 1vw, calc(0.0625rem * var(--spacing-3xl-desktop))) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-y\@from-2xs {
    margin-top: var(--grid-gutter) !important;
    margin-bottom: var(--grid-gutter) !important;
  }
}

@media (max-width: 339px) {
  .u-margin-y\@to-2xs {
    margin-top: var(--grid-gutter) !important;
    margin-bottom: var(--grid-gutter) !important;
  }
}

@media (min-width: 340px) {
  .u-margin-y-none\@from-2xs {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 339px) {
  .u-margin-y-none\@to-2xs {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}