$containerWidth: map-get($breakpoints, "desktop");
$containerPadding: 20px;
:root {
  --wrapper-width: calc(100% - #{$containerPadding});
}
@media only screen and (min-width: calc(#{$containerWidth} + #{$containerPadding})) {
  :root {
    --wrapper-width: #{$containerWidth};
  }
}
@mixin wrapper() {
  box-sizing: border-box;
  width: 100%;
  padding-left: calc(50% - var(--wrapper-width) / 2);
  padding-right: calc(50% - var(--wrapper-width) / 2);
}

@mixin customWrapper(
  $width: 400px,
  $padding: 20px
) {
  @if $padding == 0 {
    $padding: 0px;
  }
  --wrapper-width: calc(100% - #{$padding});
  @media only screen and (min-width: calc(#{$width} + #{$padding})) {
    --wrapper-width: #{$width};
  }
  box-sizing: border-box;
  width: 100%;
  padding-left: calc(50% - var(--wrapper-width) / 2);
  padding-right: calc(50% - var(--wrapper-width) / 2);
}