/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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]!./plugins/expansion-blocks/src/layout/flex-layout/style.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
.expansion-flex-layout {
  display: var(--display);
  flex-direction: var(--flex-direction);
  justify-content: var(--justify-content);
  justify-items: var(--justify-items);
  align-items: var(--align-items);
  align-content: var(--align-content);
  flex-wrap: var(--flex-wrap);
  flex-grow: var(--flex-grow);
  flex-shrink: var(--flex-shrink);
  flex-basis: var(--flex-basis);
  order: var(--order);
  align-self: var(--align-self);
  justify-self: var(--justify-self);
  gap: var(--gap-y) var(--gap-x);
  transform: translate(var(--translate-x), var(--translate-y));
}

@media (min-width: 768px) {
  .expansion-flex-layout {
    display: var(--md-display, var(--display, initial));
    flex-direction: var(--md-flex-direction, var(--flex-direction, initial));
    justify-content: var(--md-justify-content, var(--justify-content, initial));
    justify-items: var(--md-justify-items, var(--justify-items, initial));
    align-items: var(--md-align-items, var(--align-items, initial));
    align-content: var(--md-align-content, var(--align-content, initial));
    flex-wrap: var(--md-flex-wrap, var(--flex-wrap, initial));
    flex-grow: var(--md-flex-grow, var(--flex-grow, initial));
    flex-shrink: var(--md-flex-shrink, var(--flex-shrink, initial));
    flex-basis: var(--md-flex-basis, var(--flex-basis, initial));
    order: var(--md-order, var(--order, initial));
    align-self: var(--md-align-self, var(--align-self, initial));
    justify-self: var(--md-justify-self, var(--justify-self, initial));
    gap: var(--md-gap-y, var(--gap-y)) var(--md-gap-x, var(--gap-x));
    transform: translate(var(--md-translate-x, var(--translate-x)), var(--md-translate-y, var(--translate-y)));
  }
}
@media (min-width: 1024px) {
  .expansion-flex-layout {
    display: var(--lg-display, var(--md-display, var(--display, initial)));
    flex-direction: var(--lg-flex-direction, var(--md-flex-direction, var(--flex-direction, initial)));
    justify-content: var(--lg-justify-content, var(--md-justify-content, var(--justify-content, initial)));
    justify-items: var(--lg-justify-items, var(--md-justify-items, var(--justify-items, initial)));
    align-items: var(--lg-align-items, var(--md-align-items, var(--align-items, initial)));
    align-content: var(--lg-align-content, var(--md-align-content, var(--align-content, initial)));
    flex-wrap: var(--lg-flex-wrap, var(--md-flex-wrap, var(--flex-wrap, initial)));
    flex-grow: var(--lg-flex-grow, var(--md-flex-grow, var(--flex-grow, initial)));
    flex-shrink: var(--lg-flex-shrink, var(--md-flex-shrink, var(--flex-shrink, initial)));
    flex-basis: var(--lg-flex-basis, var(--md-flex-basis, var(--flex-basis, initial)));
    order: var(--lg-order, var(--md-order, var(--order, initial)));
    align-self: var(--lg-align-self, var(--md-align-self, var(--align-self, initial)));
    justify-self: var(--lg-justify-self, var(--md-justify-self, var(--justify-self, initial)));
    gap: var(--lg-gap-y, var(--md-gap-y, var(--gap-y))) var(--lg-gap-x, var(--md-gap-x, var(--gap-x)));
    transform: translate(var(--lg-translate-x, var(--md-translate-x, var(--translate-x))), var(--lg-translate-y, var(--md-translate-y, var(--translate-y))));
  }
}

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