:root {
  --margin-xl: 5vw;
  --margin-lg: 3vw;
  --margin-md: 2vw;
  --margin-sm: 1.4vw;
  --margin-xs: 0.7vw;
  --margin-xxs: 0.35vw;
}
@media screen and (max-width: 1023px) {
  :root {
    --margin-xl: 54px;
    --margin-lg: 32px;
    --margin-md: 21px;
    --margin-sm: 16px;
    --margin-xs: 7px;
    --margin-xxs: 4px;
  }
}

/*
  .[type]-[position]-[size](-[breakpoint])

  * type
  m = margin
  p = padding

  * position
  t = top
  r = right
  b = bottom
  l = left
  a = all
  y = top + bottom
  x = left + right

  * size
  xs = extra-small
  sm = small (equivalent to h3 font-size)
  md = medium
  lg = large (equivalent to h1 font-size)
  xl = extra-large

  xs-neg = extra-small negative
  sm-neg = small negative
  md-neg = etc...

  0 = zero
  auto = auto

  * breakpoint
  the breakpoint above which this class applies (see grid.css)
*/
/* margins for all screen sizes */
.m-t-0 {
  margin-top: 0 !important;
}

.m-t-xs {
  margin-top: var(--margin-xs) !important;
}

.m-t-xs-neg {
  margin-top: calc(0px - var(--margin-xs)) !important;
}

.m-t-sm {
  margin-top: var(--margin-sm) !important;
}

.m-t-sm-neg {
  margin-top: calc(0px - var(--margin-sm)) !important;
}

.m-t-md {
  margin-top: var(--margin-md) !important;
}

.m-t-md-neg {
  margin-top: calc(0px - var(--margin-md)) !important;
}

.m-t-lg {
  margin-top: var(--margin-lg) !important;
}

.m-t-lg-neg {
  margin-top: calc(0px - var(--margin-lg)) !important;
}

.m-t-xl {
  margin-top: var(--margin-xl) !important;
}

.m-t-xl-neg {
  margin-top: calc(0px - var(--margin-xl)) !important;
}

.m-t-0 {
  margin-top: 0 !important;
}

.m-t-auto {
  margin-top: auto !important;
}

.m-r-0 {
  margin-right: 0 !important;
}

.m-r-xs {
  margin-right: var(--margin-xs) !important;
}

.m-r-xs-neg {
  margin-right: calc(0px - var(--margin-xs)) !important;
}

.m-r-sm {
  margin-right: var(--margin-sm) !important;
}

.m-r-sm-neg {
  margin-right: calc(0px - var(--margin-sm)) !important;
}

.m-r-md {
  margin-right: var(--margin-md) !important;
}

.m-r-md-neg {
  margin-right: calc(0px - var(--margin-md)) !important;
}

.m-r-lg {
  margin-right: var(--margin-lg) !important;
}

.m-r-lg-neg {
  margin-right: calc(0px - var(--margin-lg)) !important;
}

.m-r-xl {
  margin-right: var(--margin-xl) !important;
}

.m-r-xl-neg {
  margin-right: calc(0px - var(--margin-xl)) !important;
}

.m-r-0 {
  margin-right: 0 !important;
}

.m-r-auto {
  margin-right: auto !important;
}

.m-b-0 {
  margin-bottom: 0 !important;
}

.m-b-xs {
  margin-bottom: var(--margin-xs) !important;
}

.m-b-xs-neg {
  margin-bottom: calc(0px - var(--margin-xs)) !important;
}

.m-b-sm {
  margin-bottom: var(--margin-sm) !important;
}

.m-b-sm-neg {
  margin-bottom: calc(0px - var(--margin-sm)) !important;
}

.m-b-md {
  margin-bottom: var(--margin-md) !important;
}

.m-b-md-neg {
  margin-bottom: calc(0px - var(--margin-md)) !important;
}

.m-b-lg {
  margin-bottom: var(--margin-lg) !important;
}

.m-b-lg-neg {
  margin-bottom: calc(0px - var(--margin-lg)) !important;
}

.m-b-xl {
  margin-bottom: var(--margin-xl) !important;
}

.m-b-xl-neg {
  margin-bottom: calc(0px - var(--margin-xl)) !important;
}

.m-b-0 {
  margin-bottom: 0 !important;
}

.m-b-auto {
  margin-bottom: auto !important;
}

.m-l-0 {
  margin-left: 0 !important;
}

.m-l-xs {
  margin-left: var(--margin-xs) !important;
}

.m-l-xs-neg {
  margin-left: calc(0px - var(--margin-xs)) !important;
}

.m-l-sm {
  margin-left: var(--margin-sm) !important;
}

.m-l-sm-neg {
  margin-left: calc(0px - var(--margin-sm)) !important;
}

.m-l-md {
  margin-left: var(--margin-md) !important;
}

.m-l-md-neg {
  margin-left: calc(0px - var(--margin-md)) !important;
}

.m-l-lg {
  margin-left: var(--margin-lg) !important;
}

.m-l-lg-neg {
  margin-left: calc(0px - var(--margin-lg)) !important;
}

.m-l-xl {
  margin-left: var(--margin-xl) !important;
}

.m-l-xl-neg {
  margin-left: calc(0px - var(--margin-xl)) !important;
}

.m-l-0 {
  margin-left: 0 !important;
}

.m-l-auto {
  margin-left: auto !important;
}

.m-x-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.m-x-xs {
  margin-right: var(--margin-xs) !important;
  margin-left: var(--margin-xs) !important;
}

.m-x-xs-neg {
  margin-right: calc(0px - var(--margin-xs)) !important;
  margin-left: calc(0px - var(--margin-xs)) !important;
}

.m-x-sm {
  margin-right: var(--margin-sm) !important;
  margin-left: var(--margin-sm) !important;
}

.m-x-sm-neg {
  margin-right: calc(0px - var(--margin-sm)) !important;
  margin-left: calc(0px - var(--margin-sm)) !important;
}

.m-x-md {
  margin-right: var(--margin-md) !important;
  margin-left: var(--margin-md) !important;
}

.m-x-md-neg {
  margin-right: calc(0px - var(--margin-md)) !important;
  margin-left: calc(0px - var(--margin-md)) !important;
}

.m-x-lg {
  margin-right: var(--margin-lg) !important;
  margin-left: var(--margin-lg) !important;
}

.m-x-lg-neg {
  margin-right: calc(0px - var(--margin-lg)) !important;
  margin-left: calc(0px - var(--margin-lg)) !important;
}

.m-x-xl {
  margin-right: var(--margin-xl) !important;
  margin-left: var(--margin-xl) !important;
}

.m-x-xl-neg {
  margin-right: calc(0px - var(--margin-xl)) !important;
  margin-left: calc(0px - var(--margin-xl)) !important;
}

.m-x-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.m-x-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.m-y-0 {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.m-y-xs {
  margin-bottom: var(--margin-xs) !important;
  margin-top: var(--margin-xs) !important;
}

.m-y-xs-neg {
  margin-bottom: calc(0px - var(--margin-xs)) !important;
  margin-top: calc(0px - var(--margin-xs)) !important;
}

.m-y-sm {
  margin-bottom: var(--margin-sm) !important;
  margin-top: var(--margin-sm) !important;
}

.m-y-sm-neg {
  margin-bottom: calc(0px - var(--margin-sm)) !important;
  margin-top: calc(0px - var(--margin-sm)) !important;
}

.m-y-md {
  margin-bottom: var(--margin-md) !important;
  margin-top: var(--margin-md) !important;
}

.m-y-md-neg {
  margin-bottom: calc(0px - var(--margin-md)) !important;
  margin-top: calc(0px - var(--margin-md)) !important;
}

.m-y-lg {
  margin-bottom: var(--margin-lg) !important;
  margin-top: var(--margin-lg) !important;
}

.m-y-lg-neg {
  margin-bottom: calc(0px - var(--margin-lg)) !important;
  margin-top: calc(0px - var(--margin-lg)) !important;
}

.m-y-xl {
  margin-bottom: var(--margin-xl) !important;
  margin-top: var(--margin-xl) !important;
}

.m-y-xl-neg {
  margin-bottom: calc(0px - var(--margin-xl)) !important;
  margin-top: calc(0px - var(--margin-xl)) !important;
}

.m-y-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.m-y-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.m-a-0 {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

.m-a-xs {
  margin-top: var(--margin-xs) !important;
  margin-right: var(--margin-xs) !important;
  margin-bottom: var(--margin-xs) !important;
  margin-left: var(--margin-xs) !important;
}

.m-a-xs-neg {
  margin-top: calc(0px - var(--margin-xs)) !important;
  margin-right: calc(0px - var(--margin-xs)) !important;
  margin-bottom: calc(0px - var(--margin-xs)) !important;
  margin-left: calc(0px - var(--margin-xs)) !important;
}

.m-a-sm {
  margin-top: var(--margin-sm) !important;
  margin-right: var(--margin-sm) !important;
  margin-bottom: var(--margin-sm) !important;
  margin-left: var(--margin-sm) !important;
}

.m-a-sm-neg {
  margin-top: calc(0px - var(--margin-sm)) !important;
  margin-right: calc(0px - var(--margin-sm)) !important;
  margin-bottom: calc(0px - var(--margin-sm)) !important;
  margin-left: calc(0px - var(--margin-sm)) !important;
}

.m-a-md {
  margin-top: var(--margin-md) !important;
  margin-right: var(--margin-md) !important;
  margin-bottom: var(--margin-md) !important;
  margin-left: var(--margin-md) !important;
}

.m-a-md-neg {
  margin-top: calc(0px - var(--margin-md)) !important;
  margin-right: calc(0px - var(--margin-md)) !important;
  margin-bottom: calc(0px - var(--margin-md)) !important;
  margin-left: calc(0px - var(--margin-md)) !important;
}

.m-a-lg {
  margin-top: var(--margin-lg) !important;
  margin-right: var(--margin-lg) !important;
  margin-bottom: var(--margin-lg) !important;
  margin-left: var(--margin-lg) !important;
}

.m-a-lg-neg {
  margin-top: calc(0px - var(--margin-lg)) !important;
  margin-right: calc(0px - var(--margin-lg)) !important;
  margin-bottom: calc(0px - var(--margin-lg)) !important;
  margin-left: calc(0px - var(--margin-lg)) !important;
}

.m-a-xl {
  margin-top: var(--margin-xl) !important;
  margin-right: var(--margin-xl) !important;
  margin-bottom: var(--margin-xl) !important;
  margin-left: var(--margin-xl) !important;
}

.m-a-xl-neg {
  margin-top: calc(0px - var(--margin-xl)) !important;
  margin-right: calc(0px - var(--margin-xl)) !important;
  margin-bottom: calc(0px - var(--margin-xl)) !important;
  margin-left: calc(0px - var(--margin-xl)) !important;
}

.m-a-0 {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

.m-a-auto {
  margin-top: auto !important;
  margin-right: auto !important;
  margin-bottom: auto !important;
  margin-left: auto !important;
}

/* margins for xs screens */
@media screen and (min-width: 360px) {
  .m-t-0-xs {
    margin-top: 0 !important;
  }
  .m-t-xs-xs {
    margin-top: var(--margin-xs) !important;
  }
  .m-t-sm-xs {
    margin-top: var(--margin-sm) !important;
  }
  .m-t-md-xs {
    margin-top: var(--margin-md) !important;
  }
  .m-t-lg-xs {
    margin-top: var(--margin-lg) !important;
  }
  .m-t-xl-xs {
    margin-top: var(--margin-xl) !important;
  }
  .m-x-0-xs {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-xs {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-xs {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-xs {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-xs {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-xs {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-xs {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-xs {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-xs {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-xs {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-xs {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-xs {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-xs {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-xs {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-xs {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-xs {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-xs {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-xs {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-r-0-xs {
    margin-right: 0 !important;
  }
  .m-r-xs-xs {
    margin-right: var(--margin-xs) !important;
  }
  .m-r-sm-xs {
    margin-right: var(--margin-sm) !important;
  }
  .m-r-md-xs {
    margin-right: var(--margin-md) !important;
  }
  .m-r-lg-xs {
    margin-right: var(--margin-lg) !important;
  }
  .m-r-xl-xs {
    margin-right: var(--margin-xl) !important;
  }
  .m-x-0-xs {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-xs {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-xs {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-xs {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-xs {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-xs {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-xs {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-xs {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-xs {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-xs {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-xs {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-xs {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-xs {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-xs {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-xs {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-xs {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-xs {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-xs {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-b-0-xs {
    margin-bottom: 0 !important;
  }
  .m-b-xs-xs {
    margin-bottom: var(--margin-xs) !important;
  }
  .m-b-sm-xs {
    margin-bottom: var(--margin-sm) !important;
  }
  .m-b-md-xs {
    margin-bottom: var(--margin-md) !important;
  }
  .m-b-lg-xs {
    margin-bottom: var(--margin-lg) !important;
  }
  .m-b-xl-xs {
    margin-bottom: var(--margin-xl) !important;
  }
  .m-x-0-xs {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-xs {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-xs {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-xs {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-xs {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-xs {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-xs {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-xs {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-xs {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-xs {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-xs {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-xs {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-xs {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-xs {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-xs {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-xs {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-xs {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-xs {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-l-0-xs {
    margin-left: 0 !important;
  }
  .m-l-xs-xs {
    margin-left: var(--margin-xs) !important;
  }
  .m-l-sm-xs {
    margin-left: var(--margin-sm) !important;
  }
  .m-l-md-xs {
    margin-left: var(--margin-md) !important;
  }
  .m-l-lg-xs {
    margin-left: var(--margin-lg) !important;
  }
  .m-l-xl-xs {
    margin-left: var(--margin-xl) !important;
  }
  .m-x-0-xs {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-xs {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-xs {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-xs {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-xs {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-xs {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-xs {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-xs {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-xs {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-xs {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-xs {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-xs {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-xs {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-xs {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-xs {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-xs {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-xs {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-xs {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
}
/* margins for sm screens */
@media screen and (min-width: 480px) {
  .m-t-0-sm {
    margin-top: 0 !important;
  }
  .m-t-xs-sm {
    margin-top: var(--margin-xs) !important;
  }
  .m-t-sm-sm {
    margin-top: var(--margin-sm) !important;
  }
  .m-t-md-sm {
    margin-top: var(--margin-md) !important;
  }
  .m-t-lg-sm {
    margin-top: var(--margin-lg) !important;
  }
  .m-t-xl-sm {
    margin-top: var(--margin-xl) !important;
  }
  .m-x-0-sm {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-sm {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-sm {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-sm {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-sm {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-sm {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-sm {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-sm {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-sm {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-sm {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-sm {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-sm {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-sm {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-sm {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-sm {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-sm {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-sm {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-sm {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-r-0-sm {
    margin-right: 0 !important;
  }
  .m-r-xs-sm {
    margin-right: var(--margin-xs) !important;
  }
  .m-r-sm-sm {
    margin-right: var(--margin-sm) !important;
  }
  .m-r-md-sm {
    margin-right: var(--margin-md) !important;
  }
  .m-r-lg-sm {
    margin-right: var(--margin-lg) !important;
  }
  .m-r-xl-sm {
    margin-right: var(--margin-xl) !important;
  }
  .m-x-0-sm {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-sm {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-sm {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-sm {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-sm {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-sm {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-sm {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-sm {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-sm {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-sm {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-sm {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-sm {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-sm {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-sm {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-sm {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-sm {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-sm {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-sm {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-b-0-sm {
    margin-bottom: 0 !important;
  }
  .m-b-xs-sm {
    margin-bottom: var(--margin-xs) !important;
  }
  .m-b-sm-sm {
    margin-bottom: var(--margin-sm) !important;
  }
  .m-b-md-sm {
    margin-bottom: var(--margin-md) !important;
  }
  .m-b-lg-sm {
    margin-bottom: var(--margin-lg) !important;
  }
  .m-b-xl-sm {
    margin-bottom: var(--margin-xl) !important;
  }
  .m-x-0-sm {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-sm {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-sm {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-sm {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-sm {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-sm {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-sm {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-sm {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-sm {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-sm {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-sm {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-sm {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-sm {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-sm {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-sm {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-sm {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-sm {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-sm {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-l-0-sm {
    margin-left: 0 !important;
  }
  .m-l-xs-sm {
    margin-left: var(--margin-xs) !important;
  }
  .m-l-sm-sm {
    margin-left: var(--margin-sm) !important;
  }
  .m-l-md-sm {
    margin-left: var(--margin-md) !important;
  }
  .m-l-lg-sm {
    margin-left: var(--margin-lg) !important;
  }
  .m-l-xl-sm {
    margin-left: var(--margin-xl) !important;
  }
  .m-x-0-sm {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-sm {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-sm {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-sm {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-sm {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-sm {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-sm {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-sm {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-sm {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-sm {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-sm {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-sm {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-sm {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-sm {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-sm {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-sm {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-sm {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-sm {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
}
/* margins for md screens */
@media screen and (min-width: 768px) {
  .m-t-0-md {
    margin-top: 0 !important;
  }
  .m-t-xs-md {
    margin-top: var(--margin-xs) !important;
  }
  .m-t-sm-md {
    margin-top: var(--margin-sm) !important;
  }
  .m-t-md-md {
    margin-top: var(--margin-md) !important;
  }
  .m-t-lg-md {
    margin-top: var(--margin-lg) !important;
  }
  .m-t-xl-md {
    margin-top: var(--margin-xl) !important;
  }
  .m-x-0-md {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-md {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-md {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-md {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-md {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-md {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-md {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-md {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-md {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-md {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-md {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-md {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-md {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-md {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-md {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-md {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-md {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-md {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-r-0-md {
    margin-right: 0 !important;
  }
  .m-r-xs-md {
    margin-right: var(--margin-xs) !important;
  }
  .m-r-sm-md {
    margin-right: var(--margin-sm) !important;
  }
  .m-r-md-md {
    margin-right: var(--margin-md) !important;
  }
  .m-r-lg-md {
    margin-right: var(--margin-lg) !important;
  }
  .m-r-xl-md {
    margin-right: var(--margin-xl) !important;
  }
  .m-x-0-md {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-md {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-md {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-md {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-md {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-md {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-md {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-md {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-md {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-md {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-md {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-md {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-md {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-md {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-md {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-md {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-md {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-md {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-b-0-md {
    margin-bottom: 0 !important;
  }
  .m-b-xs-md {
    margin-bottom: var(--margin-xs) !important;
  }
  .m-b-sm-md {
    margin-bottom: var(--margin-sm) !important;
  }
  .m-b-md-md {
    margin-bottom: var(--margin-md) !important;
  }
  .m-b-lg-md {
    margin-bottom: var(--margin-lg) !important;
  }
  .m-b-xl-md {
    margin-bottom: var(--margin-xl) !important;
  }
  .m-x-0-md {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-md {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-md {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-md {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-md {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-md {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-md {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-md {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-md {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-md {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-md {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-md {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-md {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-md {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-md {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-md {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-md {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-md {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-l-0-md {
    margin-left: 0 !important;
  }
  .m-l-xs-md {
    margin-left: var(--margin-xs) !important;
  }
  .m-l-sm-md {
    margin-left: var(--margin-sm) !important;
  }
  .m-l-md-md {
    margin-left: var(--margin-md) !important;
  }
  .m-l-lg-md {
    margin-left: var(--margin-lg) !important;
  }
  .m-l-xl-md {
    margin-left: var(--margin-xl) !important;
  }
  .m-x-0-md {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-md {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-md {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-md {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-md {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-md {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-md {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-md {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-md {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-md {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-md {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-md {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-md {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-md {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-md {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-md {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-md {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-md {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
}
/* margins for lg screens */
@media screen and (min-width: 1024px) {
  .m-t-0-lg {
    margin-top: 0 !important;
  }
  .m-t-xs-lg {
    margin-top: var(--margin-xs) !important;
  }
  .m-t-sm-lg {
    margin-top: var(--margin-sm) !important;
  }
  .m-t-md-lg {
    margin-top: var(--margin-md) !important;
  }
  .m-t-lg-lg {
    margin-top: var(--margin-lg) !important;
  }
  .m-t-xl-lg {
    margin-top: var(--margin-xl) !important;
  }
  .m-x-0-lg {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-lg {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-lg {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-lg {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-lg {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-lg {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-lg {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-lg {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-lg {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-lg {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-lg {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-lg {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-lg {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-lg {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-lg {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-lg {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-lg {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-lg {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-r-0-lg {
    margin-right: 0 !important;
  }
  .m-r-xs-lg {
    margin-right: var(--margin-xs) !important;
  }
  .m-r-sm-lg {
    margin-right: var(--margin-sm) !important;
  }
  .m-r-md-lg {
    margin-right: var(--margin-md) !important;
  }
  .m-r-lg-lg {
    margin-right: var(--margin-lg) !important;
  }
  .m-r-xl-lg {
    margin-right: var(--margin-xl) !important;
  }
  .m-x-0-lg {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-lg {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-lg {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-lg {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-lg {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-lg {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-lg {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-lg {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-lg {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-lg {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-lg {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-lg {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-lg {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-lg {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-lg {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-lg {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-lg {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-lg {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-b-0-lg {
    margin-bottom: 0 !important;
  }
  .m-b-xs-lg {
    margin-bottom: var(--margin-xs) !important;
  }
  .m-b-sm-lg {
    margin-bottom: var(--margin-sm) !important;
  }
  .m-b-md-lg {
    margin-bottom: var(--margin-md) !important;
  }
  .m-b-lg-lg {
    margin-bottom: var(--margin-lg) !important;
  }
  .m-b-xl-lg {
    margin-bottom: var(--margin-xl) !important;
  }
  .m-x-0-lg {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-lg {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-lg {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-lg {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-lg {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-lg {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-lg {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-lg {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-lg {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-lg {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-lg {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-lg {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-lg {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-lg {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-lg {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-lg {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-lg {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-lg {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-l-0-lg {
    margin-left: 0 !important;
  }
  .m-l-xs-lg {
    margin-left: var(--margin-xs) !important;
  }
  .m-l-sm-lg {
    margin-left: var(--margin-sm) !important;
  }
  .m-l-md-lg {
    margin-left: var(--margin-md) !important;
  }
  .m-l-lg-lg {
    margin-left: var(--margin-lg) !important;
  }
  .m-l-xl-lg {
    margin-left: var(--margin-xl) !important;
  }
  .m-x-0-lg {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-lg {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-lg {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-lg {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-lg {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-lg {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-lg {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-lg {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-lg {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-lg {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-lg {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-lg {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-lg {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-lg {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-lg {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-lg {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-lg {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-lg {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
}
/* margins for xl screens */
@media screen and (min-width: 1200px) {
  .m-t-0-xl {
    margin-top: 0 !important;
  }
  .m-t-xs-xl {
    margin-top: var(--margin-xs) !important;
  }
  .m-t-sm-xl {
    margin-top: var(--margin-sm) !important;
  }
  .m-t-md-xl {
    margin-top: var(--margin-md) !important;
  }
  .m-t-lg-xl {
    margin-top: var(--margin-lg) !important;
  }
  .m-t-xl-xl {
    margin-top: var(--margin-xl) !important;
  }
  .m-x-0-xl {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-xl {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-xl {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-xl {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-xl {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-xl {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-xl {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-xl {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-xl {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-xl {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-xl {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-xl {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-xl {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-xl {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-xl {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-xl {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-xl {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-xl {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-r-0-xl {
    margin-right: 0 !important;
  }
  .m-r-xs-xl {
    margin-right: var(--margin-xs) !important;
  }
  .m-r-sm-xl {
    margin-right: var(--margin-sm) !important;
  }
  .m-r-md-xl {
    margin-right: var(--margin-md) !important;
  }
  .m-r-lg-xl {
    margin-right: var(--margin-lg) !important;
  }
  .m-r-xl-xl {
    margin-right: var(--margin-xl) !important;
  }
  .m-x-0-xl {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-xl {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-xl {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-xl {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-xl {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-xl {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-xl {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-xl {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-xl {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-xl {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-xl {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-xl {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-xl {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-xl {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-xl {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-xl {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-xl {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-xl {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-b-0-xl {
    margin-bottom: 0 !important;
  }
  .m-b-xs-xl {
    margin-bottom: var(--margin-xs) !important;
  }
  .m-b-sm-xl {
    margin-bottom: var(--margin-sm) !important;
  }
  .m-b-md-xl {
    margin-bottom: var(--margin-md) !important;
  }
  .m-b-lg-xl {
    margin-bottom: var(--margin-lg) !important;
  }
  .m-b-xl-xl {
    margin-bottom: var(--margin-xl) !important;
  }
  .m-x-0-xl {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-xl {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-xl {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-xl {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-xl {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-xl {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-xl {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-xl {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-xl {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-xl {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-xl {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-xl {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-xl {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-xl {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-xl {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-xl {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-xl {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-xl {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-l-0-xl {
    margin-left: 0 !important;
  }
  .m-l-xs-xl {
    margin-left: var(--margin-xs) !important;
  }
  .m-l-sm-xl {
    margin-left: var(--margin-sm) !important;
  }
  .m-l-md-xl {
    margin-left: var(--margin-md) !important;
  }
  .m-l-lg-xl {
    margin-left: var(--margin-lg) !important;
  }
  .m-l-xl-xl {
    margin-left: var(--margin-xl) !important;
  }
  .m-x-0-xl {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .m-x-xs-xl {
    margin-right: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-x-sm-xl {
    margin-right: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-x-md-xl {
    margin-right: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-x-lg-xl {
    margin-right: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-x-xl-xl {
    margin-right: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
  .m-y-0-xl {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .m-y-xs-xl {
    margin-bottom: var(--margin-xs) !important;
    margin-top: var(--margin-xs) !important;
  }
  .m-y-sm-xl {
    margin-bottom: var(--margin-sm) !important;
    margin-top: var(--margin-sm) !important;
  }
  .m-y-md-xl {
    margin-bottom: var(--margin-md) !important;
    margin-top: var(--margin-md) !important;
  }
  .m-y-lg-xl {
    margin-bottom: var(--margin-lg) !important;
    margin-top: var(--margin-lg) !important;
  }
  .m-y-xl-xl {
    margin-bottom: var(--margin-xl) !important;
    margin-top: var(--margin-xl) !important;
  }
  .m-a-0-xl {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
  .m-a-xs-xl {
    margin-top: var(--margin-xs) !important;
    margin-right: var(--margin-xs) !important;
    margin-bottom: var(--margin-xs) !important;
    margin-left: var(--margin-xs) !important;
  }
  .m-a-sm-xl {
    margin-top: var(--margin-sm) !important;
    margin-right: var(--margin-sm) !important;
    margin-bottom: var(--margin-sm) !important;
    margin-left: var(--margin-sm) !important;
  }
  .m-a-md-xl {
    margin-top: var(--margin-md) !important;
    margin-right: var(--margin-md) !important;
    margin-bottom: var(--margin-md) !important;
    margin-left: var(--margin-md) !important;
  }
  .m-a-lg-xl {
    margin-top: var(--margin-lg) !important;
    margin-right: var(--margin-lg) !important;
    margin-bottom: var(--margin-lg) !important;
    margin-left: var(--margin-lg) !important;
  }
  .m-a-xl-xl {
    margin-top: var(--margin-xl) !important;
    margin-right: var(--margin-xl) !important;
    margin-bottom: var(--margin-xl) !important;
    margin-left: var(--margin-xl) !important;
  }
}
/* paddings for all screen sizes */
.p-t-0 {
  padding-top: 0 !important;
}

.p-t-xs {
  padding-top: var(--margin-xs) !important;
}

.p-t-xs-neg {
  padding-top: calc(0px - var(--margin-xs)) !important;
}

.p-t-sm {
  padding-top: var(--margin-sm) !important;
}

.p-t-sm-neg {
  padding-top: calc(0px - var(--margin-sm)) !important;
}

.p-t-md {
  padding-top: var(--margin-md) !important;
}

.p-t-md-neg {
  padding-top: calc(0px - var(--margin-md)) !important;
}

.p-t-lg {
  padding-top: var(--margin-lg) !important;
}

.p-t-lg-neg {
  padding-top: calc(0px - var(--margin-lg)) !important;
}

.p-t-xl {
  padding-top: var(--margin-xl) !important;
}

.p-t-xl-neg {
  padding-top: calc(0px - var(--margin-xl)) !important;
}

.p-t-0 {
  padding-top: 0 !important;
}

.p-t-auto {
  padding-top: auto !important;
}

.p-r-0 {
  padding-right: 0 !important;
}

.p-r-xs {
  padding-right: var(--margin-xs) !important;
}

.p-r-xs-neg {
  padding-right: calc(0px - var(--margin-xs)) !important;
}

.p-r-sm {
  padding-right: var(--margin-sm) !important;
}

.p-r-sm-neg {
  padding-right: calc(0px - var(--margin-sm)) !important;
}

.p-r-md {
  padding-right: var(--margin-md) !important;
}

.p-r-md-neg {
  padding-right: calc(0px - var(--margin-md)) !important;
}

.p-r-lg {
  padding-right: var(--margin-lg) !important;
}

.p-r-lg-neg {
  padding-right: calc(0px - var(--margin-lg)) !important;
}

.p-r-xl {
  padding-right: var(--margin-xl) !important;
}

.p-r-xl-neg {
  padding-right: calc(0px - var(--margin-xl)) !important;
}

.p-r-0 {
  padding-right: 0 !important;
}

.p-r-auto {
  padding-right: auto !important;
}

.p-b-0 {
  padding-bottom: 0 !important;
}

.p-b-xs {
  padding-bottom: var(--margin-xs) !important;
}

.p-b-xs-neg {
  padding-bottom: calc(0px - var(--margin-xs)) !important;
}

.p-b-sm {
  padding-bottom: var(--margin-sm) !important;
}

.p-b-sm-neg {
  padding-bottom: calc(0px - var(--margin-sm)) !important;
}

.p-b-md {
  padding-bottom: var(--margin-md) !important;
}

.p-b-md-neg {
  padding-bottom: calc(0px - var(--margin-md)) !important;
}

.p-b-lg {
  padding-bottom: var(--margin-lg) !important;
}

.p-b-lg-neg {
  padding-bottom: calc(0px - var(--margin-lg)) !important;
}

.p-b-xl {
  padding-bottom: var(--margin-xl) !important;
}

.p-b-xl-neg {
  padding-bottom: calc(0px - var(--margin-xl)) !important;
}

.p-b-0 {
  padding-bottom: 0 !important;
}

.p-b-auto {
  padding-bottom: auto !important;
}

.p-l-0 {
  padding-left: 0 !important;
}

.p-l-xs {
  padding-left: var(--margin-xs) !important;
}

.p-l-xs-neg {
  padding-left: calc(0px - var(--margin-xs)) !important;
}

.p-l-sm {
  padding-left: var(--margin-sm) !important;
}

.p-l-sm-neg {
  padding-left: calc(0px - var(--margin-sm)) !important;
}

.p-l-md {
  padding-left: var(--margin-md) !important;
}

.p-l-md-neg {
  padding-left: calc(0px - var(--margin-md)) !important;
}

.p-l-lg {
  padding-left: var(--margin-lg) !important;
}

.p-l-lg-neg {
  padding-left: calc(0px - var(--margin-lg)) !important;
}

.p-l-xl {
  padding-left: var(--margin-xl) !important;
}

.p-l-xl-neg {
  padding-left: calc(0px - var(--margin-xl)) !important;
}

.p-l-0 {
  padding-left: 0 !important;
}

.p-l-auto {
  padding-left: auto !important;
}

.p-x-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.p-x-xs {
  padding-right: var(--margin-xs) !important;
  padding-left: var(--margin-xs) !important;
}

.p-x-xs-neg {
  padding-right: calc(0px - var(--margin-xs)) !important;
  padding-left: calc(0px - var(--margin-xs)) !important;
}

.p-x-sm {
  padding-right: var(--margin-sm) !important;
  padding-left: var(--margin-sm) !important;
}

.p-x-sm-neg {
  padding-right: calc(0px - var(--margin-sm)) !important;
  padding-left: calc(0px - var(--margin-sm)) !important;
}

.p-x-md {
  padding-right: var(--margin-md) !important;
  padding-left: var(--margin-md) !important;
}

.p-x-md-neg {
  padding-right: calc(0px - var(--margin-md)) !important;
  padding-left: calc(0px - var(--margin-md)) !important;
}

.p-x-lg {
  padding-right: var(--margin-lg) !important;
  padding-left: var(--margin-lg) !important;
}

.p-x-lg-neg {
  padding-right: calc(0px - var(--margin-lg)) !important;
  padding-left: calc(0px - var(--margin-lg)) !important;
}

.p-x-xl {
  padding-right: var(--margin-xl) !important;
  padding-left: var(--margin-xl) !important;
}

.p-x-xl-neg {
  padding-right: calc(0px - var(--margin-xl)) !important;
  padding-left: calc(0px - var(--margin-xl)) !important;
}

.p-x-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.p-x-auto {
  padding-left: auto !important;
  padding-right: auto !important;
}

.p-y-0 {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

.p-y-xs {
  padding-bottom: var(--margin-xs) !important;
  padding-top: var(--margin-xs) !important;
}

.p-y-xs-neg {
  padding-bottom: calc(0px - var(--margin-xs)) !important;
  padding-top: calc(0px - var(--margin-xs)) !important;
}

.p-y-sm {
  padding-bottom: var(--margin-sm) !important;
  padding-top: var(--margin-sm) !important;
}

.p-y-sm-neg {
  padding-bottom: calc(0px - var(--margin-sm)) !important;
  padding-top: calc(0px - var(--margin-sm)) !important;
}

.p-y-md {
  padding-bottom: var(--margin-md) !important;
  padding-top: var(--margin-md) !important;
}

.p-y-md-neg {
  padding-bottom: calc(0px - var(--margin-md)) !important;
  padding-top: calc(0px - var(--margin-md)) !important;
}

.p-y-lg {
  padding-bottom: var(--margin-lg) !important;
  padding-top: var(--margin-lg) !important;
}

.p-y-lg-neg {
  padding-bottom: calc(0px - var(--margin-lg)) !important;
  padding-top: calc(0px - var(--margin-lg)) !important;
}

.p-y-xl {
  padding-bottom: var(--margin-xl) !important;
  padding-top: var(--margin-xl) !important;
}

.p-y-xl-neg {
  padding-bottom: calc(0px - var(--margin-xl)) !important;
  padding-top: calc(0px - var(--margin-xl)) !important;
}

.p-y-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.p-y-auto {
  padding-top: auto !important;
  padding-bottom: auto !important;
}

.p-a-0 {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

.p-a-xs {
  padding-top: var(--margin-xs) !important;
  padding-right: var(--margin-xs) !important;
  padding-bottom: var(--margin-xs) !important;
  padding-left: var(--margin-xs) !important;
}

.p-a-xs-neg {
  padding-top: calc(0px - var(--margin-xs)) !important;
  padding-right: calc(0px - var(--margin-xs)) !important;
  padding-bottom: calc(0px - var(--margin-xs)) !important;
  padding-left: calc(0px - var(--margin-xs)) !important;
}

.p-a-sm {
  padding-top: var(--margin-sm) !important;
  padding-right: var(--margin-sm) !important;
  padding-bottom: var(--margin-sm) !important;
  padding-left: var(--margin-sm) !important;
}

.p-a-sm-neg {
  padding-top: calc(0px - var(--margin-sm)) !important;
  padding-right: calc(0px - var(--margin-sm)) !important;
  padding-bottom: calc(0px - var(--margin-sm)) !important;
  padding-left: calc(0px - var(--margin-sm)) !important;
}

.p-a-md {
  padding-top: var(--margin-md) !important;
  padding-right: var(--margin-md) !important;
  padding-bottom: var(--margin-md) !important;
  padding-left: var(--margin-md) !important;
}

.p-a-md-neg {
  padding-top: calc(0px - var(--margin-md)) !important;
  padding-right: calc(0px - var(--margin-md)) !important;
  padding-bottom: calc(0px - var(--margin-md)) !important;
  padding-left: calc(0px - var(--margin-md)) !important;
}

.p-a-lg {
  padding-top: var(--margin-lg) !important;
  padding-right: var(--margin-lg) !important;
  padding-bottom: var(--margin-lg) !important;
  padding-left: var(--margin-lg) !important;
}

.p-a-lg-neg {
  padding-top: calc(0px - var(--margin-lg)) !important;
  padding-right: calc(0px - var(--margin-lg)) !important;
  padding-bottom: calc(0px - var(--margin-lg)) !important;
  padding-left: calc(0px - var(--margin-lg)) !important;
}

.p-a-xl {
  padding-top: var(--margin-xl) !important;
  padding-right: var(--margin-xl) !important;
  padding-bottom: var(--margin-xl) !important;
  padding-left: var(--margin-xl) !important;
}

.p-a-xl-neg {
  padding-top: calc(0px - var(--margin-xl)) !important;
  padding-right: calc(0px - var(--margin-xl)) !important;
  padding-bottom: calc(0px - var(--margin-xl)) !important;
  padding-left: calc(0px - var(--margin-xl)) !important;
}

.p-a-0 {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

.p-a-auto {
  padding-top: auto !important;
  padding-right: auto !important;
  padding-bottom: auto !important;
  padding-left: auto !important;
}

/* paddings for xs screens */
@media screen and (min-width: 360px) {
  .p-t-0-xs {
    padding-top: 0 !important;
  }
  .p-t-xs-xs {
    padding-top: var(--margin-xs) !important;
  }
  .p-t-sm-xs {
    padding-top: var(--margin-sm) !important;
  }
  .p-t-md-xs {
    padding-top: var(--margin-md) !important;
  }
  .p-t-lg-xs {
    padding-top: var(--margin-lg) !important;
  }
  .p-t-xl-xs {
    padding-top: var(--margin-xl) !important;
  }
  .p-x-0-xs {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-xs {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-xs {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-xs {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-xs {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-xs {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-xs {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-xs {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-xs {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-xs {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-xs {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-xs {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-xs {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-xs {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-xs {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-xs {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-xs {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-xs {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-r-0-xs {
    padding-right: 0 !important;
  }
  .p-r-xs-xs {
    padding-right: var(--margin-xs) !important;
  }
  .p-r-sm-xs {
    padding-right: var(--margin-sm) !important;
  }
  .p-r-md-xs {
    padding-right: var(--margin-md) !important;
  }
  .p-r-lg-xs {
    padding-right: var(--margin-lg) !important;
  }
  .p-r-xl-xs {
    padding-right: var(--margin-xl) !important;
  }
  .p-x-0-xs {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-xs {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-xs {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-xs {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-xs {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-xs {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-xs {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-xs {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-xs {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-xs {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-xs {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-xs {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-xs {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-xs {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-xs {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-xs {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-xs {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-xs {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-b-0-xs {
    padding-bottom: 0 !important;
  }
  .p-b-xs-xs {
    padding-bottom: var(--margin-xs) !important;
  }
  .p-b-sm-xs {
    padding-bottom: var(--margin-sm) !important;
  }
  .p-b-md-xs {
    padding-bottom: var(--margin-md) !important;
  }
  .p-b-lg-xs {
    padding-bottom: var(--margin-lg) !important;
  }
  .p-b-xl-xs {
    padding-bottom: var(--margin-xl) !important;
  }
  .p-x-0-xs {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-xs {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-xs {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-xs {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-xs {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-xs {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-xs {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-xs {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-xs {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-xs {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-xs {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-xs {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-xs {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-xs {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-xs {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-xs {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-xs {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-xs {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-l-0-xs {
    padding-left: 0 !important;
  }
  .p-l-xs-xs {
    padding-left: var(--margin-xs) !important;
  }
  .p-l-sm-xs {
    padding-left: var(--margin-sm) !important;
  }
  .p-l-md-xs {
    padding-left: var(--margin-md) !important;
  }
  .p-l-lg-xs {
    padding-left: var(--margin-lg) !important;
  }
  .p-l-xl-xs {
    padding-left: var(--margin-xl) !important;
  }
  .p-x-0-xs {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-xs {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-xs {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-xs {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-xs {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-xs {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-xs {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-xs {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-xs {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-xs {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-xs {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-xs {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-xs {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-xs {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-xs {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-xs {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-xs {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-xs {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
}
/* paddings for sm screens */
@media screen and (min-width: 480px) {
  .p-t-0-sm {
    padding-top: 0 !important;
  }
  .p-t-xs-sm {
    padding-top: var(--margin-xs) !important;
  }
  .p-t-sm-sm {
    padding-top: var(--margin-sm) !important;
  }
  .p-t-md-sm {
    padding-top: var(--margin-md) !important;
  }
  .p-t-lg-sm {
    padding-top: var(--margin-lg) !important;
  }
  .p-t-xl-sm {
    padding-top: var(--margin-xl) !important;
  }
  .p-x-0-sm {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-sm {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-sm {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-sm {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-sm {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-sm {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-sm {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-sm {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-sm {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-sm {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-sm {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-sm {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-sm {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-sm {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-sm {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-sm {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-sm {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-sm {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-r-0-sm {
    padding-right: 0 !important;
  }
  .p-r-xs-sm {
    padding-right: var(--margin-xs) !important;
  }
  .p-r-sm-sm {
    padding-right: var(--margin-sm) !important;
  }
  .p-r-md-sm {
    padding-right: var(--margin-md) !important;
  }
  .p-r-lg-sm {
    padding-right: var(--margin-lg) !important;
  }
  .p-r-xl-sm {
    padding-right: var(--margin-xl) !important;
  }
  .p-x-0-sm {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-sm {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-sm {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-sm {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-sm {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-sm {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-sm {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-sm {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-sm {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-sm {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-sm {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-sm {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-sm {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-sm {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-sm {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-sm {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-sm {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-sm {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-b-0-sm {
    padding-bottom: 0 !important;
  }
  .p-b-xs-sm {
    padding-bottom: var(--margin-xs) !important;
  }
  .p-b-sm-sm {
    padding-bottom: var(--margin-sm) !important;
  }
  .p-b-md-sm {
    padding-bottom: var(--margin-md) !important;
  }
  .p-b-lg-sm {
    padding-bottom: var(--margin-lg) !important;
  }
  .p-b-xl-sm {
    padding-bottom: var(--margin-xl) !important;
  }
  .p-x-0-sm {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-sm {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-sm {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-sm {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-sm {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-sm {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-sm {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-sm {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-sm {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-sm {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-sm {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-sm {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-sm {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-sm {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-sm {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-sm {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-sm {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-sm {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-l-0-sm {
    padding-left: 0 !important;
  }
  .p-l-xs-sm {
    padding-left: var(--margin-xs) !important;
  }
  .p-l-sm-sm {
    padding-left: var(--margin-sm) !important;
  }
  .p-l-md-sm {
    padding-left: var(--margin-md) !important;
  }
  .p-l-lg-sm {
    padding-left: var(--margin-lg) !important;
  }
  .p-l-xl-sm {
    padding-left: var(--margin-xl) !important;
  }
  .p-x-0-sm {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-sm {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-sm {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-sm {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-sm {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-sm {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-sm {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-sm {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-sm {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-sm {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-sm {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-sm {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-sm {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-sm {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-sm {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-sm {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-sm {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-sm {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
}
/* paddings for md screens */
@media screen and (min-width: 768px) {
  .p-t-0-md {
    padding-top: 0 !important;
  }
  .p-t-xs-md {
    padding-top: var(--margin-xs) !important;
  }
  .p-t-sm-md {
    padding-top: var(--margin-sm) !important;
  }
  .p-t-md-md {
    padding-top: var(--margin-md) !important;
  }
  .p-t-lg-md {
    padding-top: var(--margin-lg) !important;
  }
  .p-t-xl-md {
    padding-top: var(--margin-xl) !important;
  }
  .p-x-0-md {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-md {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-md {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-md {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-md {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-md {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-md {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-md {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-md {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-md {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-md {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-md {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-md {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-md {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-md {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-md {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-md {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-md {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-r-0-md {
    padding-right: 0 !important;
  }
  .p-r-xs-md {
    padding-right: var(--margin-xs) !important;
  }
  .p-r-sm-md {
    padding-right: var(--margin-sm) !important;
  }
  .p-r-md-md {
    padding-right: var(--margin-md) !important;
  }
  .p-r-lg-md {
    padding-right: var(--margin-lg) !important;
  }
  .p-r-xl-md {
    padding-right: var(--margin-xl) !important;
  }
  .p-x-0-md {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-md {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-md {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-md {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-md {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-md {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-md {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-md {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-md {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-md {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-md {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-md {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-md {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-md {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-md {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-md {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-md {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-md {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-b-0-md {
    padding-bottom: 0 !important;
  }
  .p-b-xs-md {
    padding-bottom: var(--margin-xs) !important;
  }
  .p-b-sm-md {
    padding-bottom: var(--margin-sm) !important;
  }
  .p-b-md-md {
    padding-bottom: var(--margin-md) !important;
  }
  .p-b-lg-md {
    padding-bottom: var(--margin-lg) !important;
  }
  .p-b-xl-md {
    padding-bottom: var(--margin-xl) !important;
  }
  .p-x-0-md {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-md {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-md {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-md {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-md {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-md {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-md {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-md {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-md {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-md {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-md {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-md {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-md {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-md {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-md {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-md {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-md {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-md {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-l-0-md {
    padding-left: 0 !important;
  }
  .p-l-xs-md {
    padding-left: var(--margin-xs) !important;
  }
  .p-l-sm-md {
    padding-left: var(--margin-sm) !important;
  }
  .p-l-md-md {
    padding-left: var(--margin-md) !important;
  }
  .p-l-lg-md {
    padding-left: var(--margin-lg) !important;
  }
  .p-l-xl-md {
    padding-left: var(--margin-xl) !important;
  }
  .p-x-0-md {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-md {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-md {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-md {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-md {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-md {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-md {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-md {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-md {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-md {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-md {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-md {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-md {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-md {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-md {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-md {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-md {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-md {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
}
/* paddings for lg screens */
@media screen and (min-width: 1024px) {
  .p-t-0-lg {
    padding-top: 0 !important;
  }
  .p-t-xs-lg {
    padding-top: var(--margin-xs) !important;
  }
  .p-t-sm-lg {
    padding-top: var(--margin-sm) !important;
  }
  .p-t-md-lg {
    padding-top: var(--margin-md) !important;
  }
  .p-t-lg-lg {
    padding-top: var(--margin-lg) !important;
  }
  .p-t-xl-lg {
    padding-top: var(--margin-xl) !important;
  }
  .p-x-0-lg {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-lg {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-lg {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-lg {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-lg {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-lg {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-lg {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-lg {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-lg {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-lg {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-lg {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-lg {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-lg {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-lg {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-lg {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-lg {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-lg {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-lg {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-r-0-lg {
    padding-right: 0 !important;
  }
  .p-r-xs-lg {
    padding-right: var(--margin-xs) !important;
  }
  .p-r-sm-lg {
    padding-right: var(--margin-sm) !important;
  }
  .p-r-md-lg {
    padding-right: var(--margin-md) !important;
  }
  .p-r-lg-lg {
    padding-right: var(--margin-lg) !important;
  }
  .p-r-xl-lg {
    padding-right: var(--margin-xl) !important;
  }
  .p-x-0-lg {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-lg {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-lg {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-lg {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-lg {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-lg {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-lg {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-lg {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-lg {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-lg {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-lg {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-lg {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-lg {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-lg {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-lg {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-lg {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-lg {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-lg {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-b-0-lg {
    padding-bottom: 0 !important;
  }
  .p-b-xs-lg {
    padding-bottom: var(--margin-xs) !important;
  }
  .p-b-sm-lg {
    padding-bottom: var(--margin-sm) !important;
  }
  .p-b-md-lg {
    padding-bottom: var(--margin-md) !important;
  }
  .p-b-lg-lg {
    padding-bottom: var(--margin-lg) !important;
  }
  .p-b-xl-lg {
    padding-bottom: var(--margin-xl) !important;
  }
  .p-x-0-lg {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-lg {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-lg {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-lg {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-lg {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-lg {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-lg {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-lg {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-lg {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-lg {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-lg {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-lg {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-lg {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-lg {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-lg {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-lg {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-lg {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-lg {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-l-0-lg {
    padding-left: 0 !important;
  }
  .p-l-xs-lg {
    padding-left: var(--margin-xs) !important;
  }
  .p-l-sm-lg {
    padding-left: var(--margin-sm) !important;
  }
  .p-l-md-lg {
    padding-left: var(--margin-md) !important;
  }
  .p-l-lg-lg {
    padding-left: var(--margin-lg) !important;
  }
  .p-l-xl-lg {
    padding-left: var(--margin-xl) !important;
  }
  .p-x-0-lg {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-lg {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-lg {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-lg {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-lg {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-lg {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-lg {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-lg {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-lg {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-lg {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-lg {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-lg {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-lg {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-lg {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-lg {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-lg {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-lg {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-lg {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
}
/* paddings for xl screens */
@media screen and (min-width: 1200px) {
  .p-t-0-xl {
    padding-top: 0 !important;
  }
  .p-t-xs-xl {
    padding-top: var(--margin-xs) !important;
  }
  .p-t-sm-xl {
    padding-top: var(--margin-sm) !important;
  }
  .p-t-md-xl {
    padding-top: var(--margin-md) !important;
  }
  .p-t-lg-xl {
    padding-top: var(--margin-lg) !important;
  }
  .p-t-xl-xl {
    padding-top: var(--margin-xl) !important;
  }
  .p-x-0-xl {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-xl {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-xl {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-xl {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-xl {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-xl {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-xl {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-xl {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-xl {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-xl {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-xl {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-xl {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-xl {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-xl {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-xl {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-xl {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-xl {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-xl {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-r-0-xl {
    padding-right: 0 !important;
  }
  .p-r-xs-xl {
    padding-right: var(--margin-xs) !important;
  }
  .p-r-sm-xl {
    padding-right: var(--margin-sm) !important;
  }
  .p-r-md-xl {
    padding-right: var(--margin-md) !important;
  }
  .p-r-lg-xl {
    padding-right: var(--margin-lg) !important;
  }
  .p-r-xl-xl {
    padding-right: var(--margin-xl) !important;
  }
  .p-x-0-xl {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-xl {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-xl {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-xl {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-xl {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-xl {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-xl {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-xl {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-xl {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-xl {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-xl {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-xl {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-xl {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-xl {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-xl {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-xl {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-xl {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-xl {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-b-0-xl {
    padding-bottom: 0 !important;
  }
  .p-b-xs-xl {
    padding-bottom: var(--margin-xs) !important;
  }
  .p-b-sm-xl {
    padding-bottom: var(--margin-sm) !important;
  }
  .p-b-md-xl {
    padding-bottom: var(--margin-md) !important;
  }
  .p-b-lg-xl {
    padding-bottom: var(--margin-lg) !important;
  }
  .p-b-xl-xl {
    padding-bottom: var(--margin-xl) !important;
  }
  .p-x-0-xl {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-xl {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-xl {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-xl {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-xl {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-xl {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-xl {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-xl {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-xl {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-xl {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-xl {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-xl {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-xl {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-xl {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-xl {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-xl {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-xl {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-xl {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-l-0-xl {
    padding-left: 0 !important;
  }
  .p-l-xs-xl {
    padding-left: var(--margin-xs) !important;
  }
  .p-l-sm-xl {
    padding-left: var(--margin-sm) !important;
  }
  .p-l-md-xl {
    padding-left: var(--margin-md) !important;
  }
  .p-l-lg-xl {
    padding-left: var(--margin-lg) !important;
  }
  .p-l-xl-xl {
    padding-left: var(--margin-xl) !important;
  }
  .p-x-0-xl {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .p-x-xs-xl {
    padding-right: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-x-sm-xl {
    padding-right: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-x-md-xl {
    padding-right: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-x-lg-xl {
    padding-right: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-x-xl-xl {
    padding-right: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
  .p-y-0-xl {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .p-y-xs-xl {
    padding-bottom: var(--margin-xs) !important;
    padding-top: var(--margin-xs) !important;
  }
  .p-y-sm-xl {
    padding-bottom: var(--margin-sm) !important;
    padding-top: var(--margin-sm) !important;
  }
  .p-y-md-xl {
    padding-bottom: var(--margin-md) !important;
    padding-top: var(--margin-md) !important;
  }
  .p-y-lg-xl {
    padding-bottom: var(--margin-lg) !important;
    padding-top: var(--margin-lg) !important;
  }
  .p-y-xl-xl {
    padding-bottom: var(--margin-xl) !important;
    padding-top: var(--margin-xl) !important;
  }
  .p-a-0-xl {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .p-a-xs-xl {
    padding-top: var(--margin-xs) !important;
    padding-right: var(--margin-xs) !important;
    padding-bottom: var(--margin-xs) !important;
    padding-left: var(--margin-xs) !important;
  }
  .p-a-sm-xl {
    padding-top: var(--margin-sm) !important;
    padding-right: var(--margin-sm) !important;
    padding-bottom: var(--margin-sm) !important;
    padding-left: var(--margin-sm) !important;
  }
  .p-a-md-xl {
    padding-top: var(--margin-md) !important;
    padding-right: var(--margin-md) !important;
    padding-bottom: var(--margin-md) !important;
    padding-left: var(--margin-md) !important;
  }
  .p-a-lg-xl {
    padding-top: var(--margin-lg) !important;
    padding-right: var(--margin-lg) !important;
    padding-bottom: var(--margin-lg) !important;
    padding-left: var(--margin-lg) !important;
  }
  .p-a-xl-xl {
    padding-top: var(--margin-xl) !important;
    padding-right: var(--margin-xl) !important;
    padding-bottom: var(--margin-xl) !important;
    padding-left: var(--margin-xl) !important;
  }
}

/*# sourceMappingURL=spacing.css.map */