/*!****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/bp-container/style.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************/
/* @group sizeable
------------------------------------ */
@media only screen and (min-width: 961px) {
  .sizeable,
  [sizeable] {
    width: var(--desktop-w);
    height: var(--desktop-h);
  }
  .sizeable > *,
  [sizeable] > * {
    --desktop-w: unset;
    --desktop-h: unset;
  }
}
@media only screen and (min-width: 0) and (max-width: 960px) {
  .sizeable,
  [sizeable] {
    width: var(--mobile-w);
    height: var(--mobile-h);
  }
  .sizeable > *,
  [sizeable] > * {
    --desktop-w: unset;
    --desktop-h: unset;
  }
}
/* @end */
@media only screen and (min-width: 0) and (max-width: 960px) {
  :is([positionable-mobile*=top], #important),
  :is([positionable-mobile], #important) {
    top: var(--positionable-mobile-y, 0px);
    bottom: unset;
  }
  :is([positionable-mobile*=bottom], #important) {
    bottom: var(--positionable-mobile-y, 0px);
    top: unset;
  }
  :is([positionable-mobile*=left], #important),
  :is([positionable-mobile], #important) {
    left: var(--positionable-mobile-x, 0px);
    right: unset;
  }
  :is([positionable-mobile*=right], #important) {
    right: var(--positionable-mobile-x, 0px);
    left: unset;
  }
  :is([positionable*=middle], #important) {
    left: calc(50% + var(--positionable-mobile-x, 0px));
    translate: -50% 0;
    right: unset;
  }
  :is([positionable*=center], #important) {
    top: calc(50% + var(--positionable-mobile-y, 0px));
    translate: 0 -50%;
    bottom: unset;
  }
  :is([positionable*="center middle"], #important) {
    left: calc(50% + var(--positionable-mobile-x, 0px));
    top: calc(50% + var(--positionable-mobile-y, 0px));
    translate: -50% -50%;
  }
  :is([positionable-mobile*=relative], #important) {
    position: relative;
  }
  :is([positionable-mobile*=absolute], #important) {
    position: absolute;
  }
  :is([positionable-mobile*=sticky], #important) {
    position: sticky;
  }
  :is([positionable-mobile*=static], #important) {
    position: static;
  }
}
@media only screen and (min-width: 961px) {
  :is([positionable*=top], #important),
  :is([positionable], #important) {
    top: var(--positionable-desktop-y, 0px);
    bottom: unset;
  }
  :is([positionable*=bottom], #important) {
    bottom: var(--positionable-desktop-y, 0px);
    top: unset;
  }
  :is([positionable*=left], #important),
  :is([positionable], #important) {
    left: var(--positionable-desktop-x, 0px);
    right: unset;
  }
  :is([positionable*=right], #important) {
    right: var(--positionable-desktop-x, 0px);
    left: unset;
  }
  :is([positionable*=middle], #important) {
    left: calc(50% + var(--positionable-desktop-x, 0px));
    translate: -50% 0;
    right: unset;
  }
  :is([positionable*=center], #important) {
    top: calc(50% + var(--positionable-desktop-y, 0px));
    translate: 0 -50%;
    bottom: unset;
  }
  :is([positionable*="center middle"], #important) {
    left: calc(50% + var(--positionable-desktop-x, 0px));
    top: calc(50% + var(--positionable-desktop-y, 0px));
    translate: -50% -50%;
  }
  :is([positionable*=relative], #important) {
    position: relative;
  }
  :is([positionable*=absolute], #important) {
    position: absolute;
  }
  :is([positionable*=sticky], #important) {
    position: sticky;
  }
  :is([positionable*=static], #important) {
    position: static;
  }
}
.container {
  width: 100%;
}

/*# sourceMappingURL=style-index.css.map*/