.q-grid-container {
  width: 100%;
  container-type: inline-size;
}
.q-grid-system {
  --q-grid-min: 368px;
  --q-grid-max: 1080px;
  --q-grid-guide: 1px;
  --q-grid-color: #ebebeb;
  --q-grid-cross: #a8a8a8;
  --q-grid-screen: 100vw;
  --q-grid-margin: 32px;
  max-width: var(--q-grid-max);
  min-width: var(--q-grid-min);
  margin-top: var(--q-grid-guide);
  margin-left: var(--q-grid-guide);
  display: flex;
  flex-direction: column;
  position: relative;
}
.q-grid-container[data-container='true'] > .q-grid-system {
  --q-grid-screen: 100cqw;
  --q-grid-margin: 0px;
}
.q-grid-system::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--q-grid-guide)) 0 0 calc(-1 * var(--q-grid-guide));
  border: var(--q-grid-guide) solid var(--q-grid-color);
  pointer-events: none;
}
.q-grid {
  --q-grid-width: clamp(
    calc(var(--q-grid-min) - var(--q-grid-guide)),
    calc(var(--q-grid-screen) - var(--q-grid-guide) - 2 * var(--q-grid-margin)),
    calc(var(--q-grid-max) - var(--q-grid-guide))
  );
  --q-grid-padding: 48px;
  width: var(--q-grid-width);
  height: var(--q-grid-height);
  display: grid;
  position: relative;
  grid-template-columns: repeat(
    var(--q-grid-columns),
    calc(var(--q-grid-width) / var(--q-grid-columns))
  );
  grid-template-rows: repeat(var(--q-grid-rows), calc(var(--q-grid-height) / var(--q-grid-rows)));
  border-bottom: var(--q-grid-guide) solid var(--q-grid-color);
  font-size: 16px;
  line-height: 24px;
}
.q-grid__cell {
  z-index: 2;
  margin: 0 var(--q-grid-guide) var(--q-grid-guide) 0;
  padding: var(--q-grid-padding);
  overflow: hidden;
}
.q-grid__cell > div {
  height: 100%;
}
.q-grid__guides {
  display: contents;
  pointer-events: none;
  z-index: 1;
}
.q-grid__guide {
  position: absolute;
  inset: 0;
  border-right: var(--q-grid-guide) solid var(--q-grid-color);
  border-bottom: var(--q-grid-guide) solid var(--q-grid-color);
}
.q-grid__guide[data-right='false'] {
  border-right: none;
}
.q-grid__guide[data-bottom='false'] {
  border-bottom: none;
}
.q-grid__cross {
  --q-grid-cross-size: 21px;
  --q-grid-cross-half: calc(var(--q-grid-cross-size) / 2 + var(--q-grid-guide) - 0.5px);
  position: absolute;
  inset: calc(-1 * var(--q-grid-cross-half));
  width: fit-content;
  height: fit-content;
  pointer-events: none;
  z-index: 2;
}
.q-grid__cross > i {
  position: absolute;
  border: 0 solid var(--q-grid-cross);
}
.q-grid__cross-v {
  width: var(--q-grid-cross-half);
  height: var(--q-grid-cross-size);
  border-right-width: var(--q-grid-guide) !important;
}
.q-grid__cross-h {
  width: var(--q-grid-cross-size);
  height: var(--q-grid-cross-half);
  border-bottom-width: var(--q-grid-guide) !important;
}
.q-grid-system[data-debug='true'] {
  --q-grid-color: rgba(255, 204, 109, 0.7);
}
.q-grid-system[data-debug='true'] .q-grid__cell {
  background: rgba(255, 204, 109, 0.1);
}
.q-grid {
  margin: 0;
  padding: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.q-grid-system[data-dashed='true']::before {
  border-style: dashed;
}
.q-grid-system[data-dashed='true'] .q-grid {
  border-bottom-style: dashed;
}
.q-grid-system[data-dashed='true'] .q-grid__guide {
  border-right-style: dashed;
  border-bottom-style: dashed;
}
.q-grid-system[data-dashed='true'] .q-grid__guide[data-right='false'] {
  border-right: none;
}
.q-grid-system[data-dashed='true'] .q-grid__guide[data-bottom='false'] {
  border-bottom: none;
}
.q-grid-container[data-page='true'] {
  background: #fafafa;
}
[data-theme='dark'] .q-grid-system {
  --q-grid-color: #1f1f1f;
  --q-grid-cross: hsl(0 0% 53%);
}
[data-theme='dark'] .q-grid-container[data-page='true'] {
  background: #000;
}
@media (max-width: 960px) {
  .q-grid {
    --q-grid-padding: 40px;
  }
  .q-grid__cross {
    --q-grid-cross-size: 15px;
  }
}
@media (max-width: 600px) {
  .q-grid-system {
    --q-grid-margin: 16px;
  }
  .q-grid {
    --q-grid-padding: 24px;
  }
  .q-grid__cross {
    --q-grid-cross-size: 11px;
  }
}
.q-grid-system {
  --q-grid-dash: url('../assets/grid-guide-light.svg');
}
.q-grid-system[data-dashed='true']::before,
.q-grid-system[data-dashed='true'] .q-grid {
  border-image: var(--q-grid-dash) 1 round;
}
.q-grid-system[data-dashed='true'] .q-grid__guide {
  border-image: var(--q-grid-dash) 2 round;
}
[data-theme='dark'] .q-grid-system {
  --q-grid-dash: url('../assets/grid-guide-dark.svg');
}
.q-grid-container[data-container='false'] {
  container-type: normal;
}
.q-grid-container[data-page='true'] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 90px;
  box-sizing: border-box;
}
.q-grid-container[data-page='true'] > .q-grid-system {
  width: max-content;
  flex-shrink: 0;
}
@media (max-width: 960px) {
  .q-grid-container[data-page='true'] {
    padding: 32px 0;
  }
}
@media (max-width: 600px) {
  .q-grid-container[data-page='true'] {
    padding: 16px 0;
  }
}
.q-grid-system[data-debug='true'] {
  --q-grid-color: rgba(255, 204, 109, 0.7) !important;
}