.lq-flex-row {
  /* Reset per-row variables so nested rows do not inherit outer row settings. */
  --lq-flex-row-display: flex;
  --lq-flex-row-direction: row;
  --lq-flex-row-align-items: center;
  --lq-flex-row-justify-content: center;
  --lq-flex-row-wrap: wrap;
  --lq-flex-row-gap: 0px;
  --lq-flex-row-row-gap: 0px;
  --lq-flex-row-column-gap: 0px;
  --lq-flex-row-width: 100%;
  --lq-flex-row-max-width: none;
  --lq-flex-row-min-height: 0;
  --lq-flex-row-height: auto;
  --lq-flex-row-margin-top: 0;
  --lq-flex-row-margin-right: 0;
  --lq-flex-row-margin-bottom: 0;
  --lq-flex-row-margin-left: 0;
  --lq-flex-row-padding-top: 0;
  --lq-flex-row-padding-right: 0;
  --lq-flex-row-padding-bottom: 0;
  --lq-flex-row-padding-left: 0;
  --lq-flex-row-background-color: transparent;
  --lq-flex-row-text-color: inherit;
  --lq-flex-row-border-radius: 0;
  --lq-flex-row-position: static;
  --lq-flex-row-z-index: auto;
  --lq-flex-row-overflow: visible;
  --lq-flex-row-grid-template-columns: initial;
  --lq-flex-row-tablet-direction: initial;
  --lq-flex-row-tablet-wrap: initial;
  --lq-flex-row-tablet-align-items: initial;
  --lq-flex-row-tablet-justify-content: initial;
  --lq-flex-row-mobile-direction: initial;
  --lq-flex-row-mobile-wrap: initial;
  --lq-flex-row-mobile-align-items: initial;
  --lq-flex-row-mobile-justify-content: initial;

  box-sizing: border-box;
  display: var(--lq-flex-row-display, flex);
  flex-direction: var(--lq-flex-row-direction, row);
  align-items: var(--lq-flex-row-align-items, center);
  justify-content: var(--lq-flex-row-justify-content, center);
  flex-wrap: var(--lq-flex-row-wrap, wrap);
  gap: var(--lq-flex-row-gap, 0px);
  row-gap: var(--lq-flex-row-row-gap, var(--lq-flex-row-gap, 0px));
  column-gap: var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px));
  width: var(--lq-flex-row-width, 100%);
  max-width: var(--lq-flex-row-max-width, none);
  min-height: var(--lq-flex-row-min-height, 0);
  height: var(--lq-flex-row-height, auto);
  margin-top: var(--lq-flex-row-margin-top, 0);
  margin-right: var(--lq-flex-row-margin-right, 0);
  margin-bottom: var(--lq-flex-row-margin-bottom, 0);
  margin-left: var(--lq-flex-row-margin-left, 0);
  padding-top: var(--lq-flex-row-padding-top, 0);
  padding-right: var(--lq-flex-row-padding-right, 0);
  padding-bottom: var(--lq-flex-row-padding-bottom, 0);
  padding-left: var(--lq-flex-row-padding-left, 0);
  background-color: var(--lq-flex-row-background-color, transparent);
  color: var(--lq-flex-row-text-color, inherit);
  border-radius: var(--lq-flex-row-border-radius, 0);
  position: var(--lq-flex-row-position, static);
  z-index: var(--lq-flex-row-z-index, auto);
  overflow: var(--lq-flex-row-overflow, visible);
}

.lq-flex-row--display-grid {
  grid-template-columns: var(--lq-flex-row-grid-template-columns, repeat(auto-fit, minmax(0, 1fr)));
}

.lq-flex-row--display-block {
  display: block;
}

.lq-flex-col {
  /* Reset per-column variables so nested columns do not inherit outer column settings. */
  --lq-flex-col-basis: auto;
  --lq-flex-col-grow: 0;
  --lq-flex-col-shrink: 1;
  --lq-flex-col-order: 0;
  --lq-flex-col-align-self: auto;
  --lq-flex-col-width: auto;
  --lq-flex-col-max-width: none;
  --lq-flex-col-margin-top: 0;
  --lq-flex-col-margin-right: 0;
  --lq-flex-col-margin-bottom: 0;
  --lq-flex-col-margin-left: 0;
  --lq-flex-col-padding-top: 0;
  --lq-flex-col-padding-right: 0;
  --lq-flex-col-padding-bottom: 0;
  --lq-flex-col-padding-left: 0;
  --lq-flex-col-background-color: transparent;
  --lq-flex-col-text-color: inherit;
  --lq-flex-col-border-radius: 0;
  --lq-flex-col-position: static;
  --lq-flex-col-z-index: auto;
  --lq-flex-col-overflow: visible;
  --lq-flex-col-content-display: block;
  --lq-flex-col-content-direction: row;
  --lq-flex-col-content-align-items: flex-start;
  --lq-flex-col-content-justify-content: flex-start;
  --lq-flex-col-content-gap: 0;
  --lq-flex-col-tablet-basis: initial;
  --lq-flex-col-mobile-basis: initial;
  --lq-flex-col-tablet-order: initial;
  --lq-flex-col-mobile-order: initial;
  --lq-flex-col-tablet-align-self: initial;
  --lq-flex-col-mobile-align-self: initial;
  --lq-flex-col-tablet-width: initial;
  --lq-flex-col-mobile-width: initial;

  box-sizing: border-box;
  min-width: 0;
  flex-grow: var(--lq-flex-col-grow, 0);
  flex-shrink: var(--lq-flex-col-shrink, 1);
  flex-basis: var(--lq-flex-col-basis, auto);
  align-self: var(--lq-flex-col-align-self, auto);
  order: var(--lq-flex-col-order, 0);
  width: var(--lq-flex-col-width, auto);
  max-width: var(--lq-flex-col-max-width, none);
  margin-top: var(--lq-flex-col-margin-top, 0);
  margin-right: var(--lq-flex-col-margin-right, 0);
  margin-bottom: var(--lq-flex-col-margin-bottom, 0);
  margin-left: var(--lq-flex-col-margin-left, 0);
  padding-top: var(--lq-flex-col-padding-top, 0);
  padding-right: var(--lq-flex-col-padding-right, 0);
  padding-bottom: var(--lq-flex-col-padding-bottom, 0);
  padding-left: var(--lq-flex-col-padding-left, 0);
  background-color: var(--lq-flex-col-background-color, transparent);
  color: var(--lq-flex-col-text-color, inherit);
  border-radius: var(--lq-flex-col-border-radius, 0);
  position: var(--lq-flex-col-position, static);
  z-index: var(--lq-flex-col-z-index, auto);
  overflow: var(--lq-flex-col-overflow, visible);
}

.lq-flex-row > .lq-flex-col {
  box-sizing: border-box;
}

.lq-flex-row--cols-auto > .lq-flex-col:not(.lq-flex-col--custom-basis) {
  flex: 0 1 auto;
  max-width: none;
}

.lq-flex-row--cols-1 > .lq-flex-col:not(.lq-flex-col--custom-basis) {
  flex: 0 1 100%;
  max-width: 100%;
  min-width: min(100%, min-content);
}

.lq-flex-row--cols-2 > .lq-flex-col:not(.lq-flex-col--custom-basis) {
  flex: 1 1 calc((100% - var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px))) / 2);
  max-width: calc((100% - var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px))) / 2);
  min-width: min(100%, min-content);
}

.lq-flex-row--cols-3 > .lq-flex-col:not(.lq-flex-col--custom-basis) {
  flex: 1 1 calc((100% - (2 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 3);
  max-width: calc((100% - (2 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 3);
  min-width: min(100%, min-content);
}

.lq-flex-row--cols-4 > .lq-flex-col:not(.lq-flex-col--custom-basis) {
  flex: 1 1 calc((100% - (3 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 4);
  max-width: calc((100% - (3 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 4);
  min-width: min(100%, min-content);
}

.lq-flex-row--cols-5 > .lq-flex-col:not(.lq-flex-col--custom-basis) {
  flex: 1 1 calc((100% - (4 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 5);
  max-width: calc((100% - (4 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 5);
  min-width: min(100%, min-content);
}

.lq-flex-row--cols-6 > .lq-flex-col:not(.lq-flex-col--custom-basis) {
  flex: 1 1 calc((100% - (5 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 6);
  max-width: calc((100% - (5 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 6);
  min-width: min(100%, min-content);
}

.lq-flex-col--custom-basis {
  flex-basis: var(--lq-flex-col-basis, auto);
  width: var(--lq-flex-col-width, auto);
  max-width: var(--lq-flex-col-max-width, none);
}

.lq-flex-col--content-flex {
  display: flex;
  flex-direction: var(--lq-flex-col-content-direction, row);
  align-items: var(--lq-flex-col-content-align-items, flex-start);
  justify-content: var(--lq-flex-col-content-justify-content, flex-start);
  gap: var(--lq-flex-col-content-gap, 0);
}

.lq-flex-row > .lq-flex-col > .lq-button-wrapper {
  max-width: 100%;
}

@media (max-width: 1024px) {
  .lq-flex-row {
    flex-direction: var(--lq-flex-row-tablet-direction, var(--lq-flex-row-direction, row));
    flex-wrap: var(--lq-flex-row-tablet-wrap, var(--lq-flex-row-wrap, wrap));
    align-items: var(--lq-flex-row-tablet-align-items, var(--lq-flex-row-align-items, center));
    justify-content: var(--lq-flex-row-tablet-justify-content, var(--lq-flex-row-justify-content, center));
  }

  .lq-flex-row--tablet-cols-auto > .lq-flex-col:not(.lq-flex-col--custom-tablet-basis) {
    flex: 0 1 auto;
    max-width: none;
    min-width: 0;
  }

  .lq-flex-row--tablet-cols-1 > .lq-flex-col:not(.lq-flex-col--custom-tablet-basis) {
    flex: 0 1 100%;
    max-width: 100%;
    min-width: min(100%, min-content);
  }

  .lq-flex-row--tablet-cols-2 > .lq-flex-col:not(.lq-flex-col--custom-tablet-basis) {
    flex: 1 1 calc((100% - var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px))) / 2);
    max-width: calc((100% - var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px))) / 2);
    min-width: min(100%, min-content);
  }

  .lq-flex-row--tablet-cols-3 > .lq-flex-col:not(.lq-flex-col--custom-tablet-basis) {
    flex: 1 1 calc((100% - (2 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 3);
    max-width: calc((100% - (2 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 3);
    min-width: min(100%, min-content);
  }

  .lq-flex-row--tablet-cols-4 > .lq-flex-col:not(.lq-flex-col--custom-tablet-basis) {
    flex: 1 1 calc((100% - (3 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 4);
    max-width: calc((100% - (3 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 4);
    min-width: min(100%, min-content);
  }

  .lq-flex-row--tablet-cols-5 > .lq-flex-col:not(.lq-flex-col--custom-tablet-basis) {
    flex: 1 1 calc((100% - (4 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 5);
    max-width: calc((100% - (4 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 5);
    min-width: min(100%, min-content);
  }

  .lq-flex-row--tablet-cols-6 > .lq-flex-col:not(.lq-flex-col--custom-tablet-basis) {
    flex: 1 1 calc((100% - (5 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 6);
    max-width: calc((100% - (5 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 6);
    min-width: min(100%, min-content);
  }

  .lq-flex-col {
    flex-basis: var(--lq-flex-col-tablet-basis, var(--lq-flex-col-basis, auto));
    order: var(--lq-flex-col-tablet-order, var(--lq-flex-col-order, 0));
    align-self: var(--lq-flex-col-tablet-align-self, var(--lq-flex-col-align-self, auto));
    width: var(--lq-flex-col-tablet-width, var(--lq-flex-col-width, auto));
  }

  .lq-flex-col--custom-tablet-basis {
    flex-basis: var(--lq-flex-col-tablet-basis, var(--lq-flex-col-basis, auto));
    width: var(--lq-flex-col-tablet-width, var(--lq-flex-col-width, auto));
    max-width: var(--lq-flex-col-max-width, none);
  }

  .lq-flex-row--tablet-justify-center > .lq-flex-col:not(.lq-flex-col--custom-tablet-basis),
  .lq-flex-row--tablet-justify-flex-end > .lq-flex-col:not(.lq-flex-col--custom-tablet-basis),
  .lq-flex-row--tablet-justify-space-between > .lq-flex-col:not(.lq-flex-col--custom-tablet-basis),
  .lq-flex-row--tablet-justify-space-around > .lq-flex-col:not(.lq-flex-col--custom-tablet-basis),
  .lq-flex-row--tablet-justify-space-evenly > .lq-flex-col:not(.lq-flex-col--custom-tablet-basis) {
    flex: 0 1 auto;
    max-width: 100%;
    width: auto;
    min-width: 0;
  }

  .lq-flex-row--tablet-justify-center > .lq-flex-col > .lq-button-wrapper {
    width: auto;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .lq-flex-row--tablet-justify-flex-end > .lq-flex-col > .lq-button-wrapper {
    width: auto;
    max-width: 100%;
    justify-content: flex-end;
    text-align: right;
    margin-left: auto;
  }
}

@media (max-width: 767px) {
  .lq-flex-row {
    flex-direction: var(
      --lq-flex-row-mobile-direction,
      var(--lq-flex-row-tablet-direction, var(--lq-flex-row-direction, row))
    );
    flex-wrap: var(
      --lq-flex-row-mobile-wrap,
      var(--lq-flex-row-tablet-wrap, var(--lq-flex-row-wrap, wrap))
    );
    align-items: var(
      --lq-flex-row-mobile-align-items,
      var(--lq-flex-row-tablet-align-items, var(--lq-flex-row-align-items, center))
    );
    justify-content: var(
      --lq-flex-row-mobile-justify-content,
      var(--lq-flex-row-tablet-justify-content, var(--lq-flex-row-justify-content, center))
    );
  }

  .lq-flex-row--mobile-cols-auto > .lq-flex-col:not(.lq-flex-col--custom-mobile-basis) {
    flex: 0 1 auto;
    max-width: none;
    min-width: 0;
  }

  .lq-flex-row--mobile-cols-1 > .lq-flex-col:not(.lq-flex-col--custom-mobile-basis) {
    flex: 0 1 100%;
    max-width: 100%;
    min-width: min(100%, min-content);
  }

  .lq-flex-row--mobile-cols-2 > .lq-flex-col:not(.lq-flex-col--custom-mobile-basis) {
    flex: 1 1 calc((100% - var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px))) / 2);
    max-width: calc((100% - var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px))) / 2);
    min-width: min(100%, min-content);
  }

  .lq-flex-row--mobile-cols-3 > .lq-flex-col:not(.lq-flex-col--custom-mobile-basis) {
    flex: 1 1 calc((100% - (2 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 3);
    max-width: calc((100% - (2 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 3);
    min-width: min(100%, min-content);
  }

  .lq-flex-row--mobile-cols-4 > .lq-flex-col:not(.lq-flex-col--custom-mobile-basis) {
    flex: 1 1 calc((100% - (3 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 4);
    max-width: calc((100% - (3 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 4);
    min-width: min(100%, min-content);
  }

  .lq-flex-row--mobile-cols-5 > .lq-flex-col:not(.lq-flex-col--custom-mobile-basis) {
    flex: 1 1 calc((100% - (4 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 5);
    max-width: calc((100% - (4 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 5);
    min-width: min(100%, min-content);
  }

  .lq-flex-row--mobile-cols-6 > .lq-flex-col:not(.lq-flex-col--custom-mobile-basis) {
    flex: 1 1 calc((100% - (5 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 6);
    max-width: calc((100% - (5 * var(--lq-flex-row-column-gap, var(--lq-flex-row-gap, 0px)))) / 6);
    min-width: min(100%, min-content);
  }

  .lq-flex-col {
    flex-basis: var(
      --lq-flex-col-mobile-basis,
      var(--lq-flex-col-tablet-basis, var(--lq-flex-col-basis, auto))
    );
    order: var(--lq-flex-col-mobile-order, var(--lq-flex-col-tablet-order, var(--lq-flex-col-order, 0)));
    align-self: var(
      --lq-flex-col-mobile-align-self,
      var(--lq-flex-col-tablet-align-self, var(--lq-flex-col-align-self, auto))
    );
    width: var(
      --lq-flex-col-mobile-width,
      var(--lq-flex-col-tablet-width, var(--lq-flex-col-width, auto))
    );
  }

  .lq-flex-col--custom-mobile-basis {
    flex-basis: var(
      --lq-flex-col-mobile-basis,
      var(--lq-flex-col-tablet-basis, var(--lq-flex-col-basis, auto))
    );
    width: var(
      --lq-flex-col-mobile-width,
      var(--lq-flex-col-tablet-width, var(--lq-flex-col-width, auto))
    );
    max-width: var(--lq-flex-col-max-width, none);
  }

  /* After column-count rules: shrink cols + center button wrappers when row justify is not flex-start. */
  .lq-flex-row--mobile-justify-center > .lq-flex-col:not(.lq-flex-col--custom-mobile-basis),
  .lq-flex-row--mobile-justify-flex-end > .lq-flex-col:not(.lq-flex-col--custom-mobile-basis),
  .lq-flex-row--mobile-justify-space-between > .lq-flex-col:not(.lq-flex-col--custom-mobile-basis),
  .lq-flex-row--mobile-justify-space-around > .lq-flex-col:not(.lq-flex-col--custom-mobile-basis),
  .lq-flex-row--mobile-justify-space-evenly > .lq-flex-col:not(.lq-flex-col--custom-mobile-basis) {
    flex: 0 1 auto;
    max-width: 100%;
    width: auto;
    min-width: 0;
  }

  .lq-flex-row--mobile-justify-center > .lq-flex-col > .lq-button-wrapper {
    width: auto;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .lq-flex-row--mobile-justify-flex-end > .lq-flex-col > .lq-button-wrapper {
    width: auto;
    max-width: 100%;
    justify-content: flex-end;
    text-align: right;
    margin-left: auto;
  }
}