/**
 * @prop --tct-grid-gap-none: (<length-percentage>+) Controls the gap between grid rows and columns when gap is none.
 * @prop --tct-grid-gap-compact: (<length-percentage>+) Controls the gap between grid rows and columns when gap is compact.
 * @prop --tct-grid-gap-normal: (<length-percentage>+) Controls the gap between grid rows and columns when gap is normal.
 * @prop --tct-grid-gap-comfortable: (<length-percentage>+) Controls the gap between grid rows and columns when gap is comfortable.
 */
:host {
  display: block;
}

:host([hidden]) {
  display: none;
}

.q2-grid {
  --comp-grid-gap-none: var(--tct-grid-gap-none, var(--app-scale-0x, 0px));
  --comp-grid-gap-compact: var(--tct-grid-gap-compact, var(--app-scale-3x, 15px));
  --comp-grid-gap-normal: var(--tct-grid-gap-normal, var(--app-scale-5x, 25px));
  --comp-grid-gap-comfortable: var(--tct-grid-gap-comfortable, var(--app-scale-7x, 35px));
  --grid-template-columns: "";
  --grid-template-rows: "";
  --grid-gap: "";
  --justify-items: "";
  --align-items: "";
  --xs-grid-template-columns: "";
  --xs-grid-template-rows: "";
  --xs-grid-gap: "";
  --xs-justify-items: "";
  --xs-align-items: "";
  --sm-grid-template-columns: "";
  --sm-grid-template-rows: "";
  --sm-grid-gap: "";
  --sm-justify-items: "";
  --sm-align-items: "";
  --md-grid-template-columns: "";
  --md-grid-template-rows: "";
  --md-grid-gap: "";
  --md-justify-items: "";
  --md-align-items: "";
  --lg-grid-template-columns: "";
  --lg-grid-template-rows: "";
  --lg-grid-gap: "";
  --lg-justify-items: "";
  --lg-align-items: "";
  --xl-grid-template-columns: "";
  --xl-grid-template-rows: "";
  --xl-grid-gap: "";
  --xl-justify-items: "";
  --xl-align-items: "";
  display: grid;
  width: 100%;
  height: 100%;
  grid-auto-rows: auto;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
}

.q2-grid {
  grid-template-columns: var(--grid-template-columns);
  grid-template-rows: var(--grid-template-rows);
  gap: var(--grid-gap);
  justify-items: var(--justify-items);
  align-items: var(--align-items);
}

@media screen and (min-width: 480px) {
  .q2-grid {
    grid-template-columns: var(--xs-grid-template-columns);
    grid-template-rows: var(--xs-grid-template-rows);
    gap: var(--xs-grid-gap);
    justify-items: var(--xs-justify-items);
    align-items: var(--xs-align-items);
  }
}
@media screen and (min-width: 768px) {
  .q2-grid {
    grid-template-columns: var(--sm-grid-template-columns);
    grid-template-rows: var(--sm-grid-template-rows);
    gap: var(--sm-grid-gap);
    justify-items: var(--sm-justify-items);
    align-items: var(--sm-align-items);
  }
}
@media screen and (min-width: 992px) {
  .q2-grid {
    grid-template-columns: var(--md-grid-template-columns);
    grid-template-rows: var(--md-grid-template-rows);
    gap: var(--md-grid-gap);
    justify-items: var(--md-justify-items);
    align-items: var(--md-align-items);
  }
}
@media screen and (min-width: 1200px) {
  .q2-grid {
    grid-template-columns: var(--lg-grid-template-columns);
    grid-template-rows: var(--lg-grid-template-rows);
    gap: var(--lg-grid-gap);
    justify-items: var(--lg-justify-items);
    align-items: var(--lg-align-items);
  }
}
@media screen and (min-width: 1400px) {
  .q2-grid {
    grid-template-columns: var(--xl-grid-template-columns);
    grid-template-rows: var(--xl-grid-template-rows);
    gap: var(--xl-grid-gap);
    justify-items: var(--xl-justify-items);
    align-items: var(--xl-align-items);
  }
}