:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host {
  /**
  * @prop --grid-col-gap: gap between all columns. Defaults to `var(--nano-spacing-md)`
  * @prop --grid-row-gap: gap between all rows. Defaults to `var(--nano-spacing-md)`
  * @prop --grid-align-items: alignment of items in the grid. Defaults to `normal`
  * @prop --grid-justify-items: justification of items in the grid. Defaults to `start`
  */
  --grid-col-gap: var(--nano-spacing-md);
  --grid-row-gap: var(--nano-spacing-md);
  --grid-align-items: start;
  --grid-justify-items: normal;
  --current-grid-size: "grid size: s";
  container-type: inline-size;
  display: block;
}
:host .grid {
  display: grid;
  gap: var(--grid-row-gap) var(--grid-col-gap);
  block-size: inherit;
  min-block-size: inherit;
  place-items: var(--grid-align-items) var(--grid-justify-items);
}

:host([show-helper]:not([show-helper=false])) {
  position: relative;
}
:host([show-helper]:not([show-helper=false])) .grid--helper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid !important;
  overflow: hidden;
}
:host([show-helper]:not([show-helper=false])) .grid--helper::before {
  content: var(--current-grid-size);
  font-size: 30px;
  position: absolute;
  inline-size: 100%;
  inset-inline-start: 0;
  text-align: center;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  z-index: 99;
  pointer-events: none;
}
:host([show-helper]:not([show-helper=false])) .grid__helper-item {
  background: hsla(204, 80%, 72%, 0.25);
  block-size: 100vh;
  inline-size: 100%;
}