:host {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
}

:host(.duet-grid-variation-flex) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100%;
  max-width: 100%;
  height: auto;
}

:host(.duet-grid-variation-flex.duet-grid-breakpoint-x-small) {
  flex-direction: row !important;
}
@media (max-width: 22.5em) {
  :host(.duet-grid-variation-flex.duet-grid-breakpoint-x-small) {
    flex-direction: column !important;
  }
}

:host(.duet-grid-variation-flex.duet-grid-breakpoint-x-small.duet-grid-row-reverse) {
  flex-direction: row-reverse !important;
}

@media (min-width: 36em) {
  :host(.duet-grid-variation-flex.duet-grid-breakpoint-small) {
    flex-direction: row !important;
  }
}

@media (min-width: 36em) {
  :host(.duet-grid-variation-flex.duet-grid-breakpoint-small.duet-grid-row-reverse) {
    flex-direction: row-reverse !important;
  }
}

@media (min-width: 48em) {
  :host(.duet-grid-variation-flex.duet-grid-breakpoint-medium) {
    flex-direction: row !important;
  }
}

@media (min-width: 48em) {
  :host(.duet-grid-variation-flex.duet-grid-breakpoint-medium.duet-grid-row-reverse) {
    flex-direction: row-reverse !important;
  }
}

@media (min-width: 62em) {
  :host(.duet-grid-variation-flex.duet-grid-breakpoint-large) {
    flex-direction: row !important;
  }
}

@media (min-width: 62em) {
  :host(.duet-grid-variation-flex.duet-grid-breakpoint-large.duet-grid-row-reverse) {
    flex-direction: row-reverse !important;
  }
}

@media (min-width: 64.0625em) {
  :host(.duet-grid-variation-flex.duet-grid-breakpoint-x-large) {
    flex-direction: row !important;
  }
}

@media (min-width: 64.0625em) {
  :host(.duet-grid-variation-flex.duet-grid-breakpoint-x-large.duet-grid-row-reverse) {
    flex-direction: row-reverse !important;
  }
}

:host(.duet-grid-variation-flex.duet-grid-wrap) {
  flex-wrap: wrap !important;
}

:host(.duet-grid-variation-flex.duet-no-stacking) {
  flex-direction: row !important;
}

:host(.duet-grid-variation-flex.duet-no-stacking.duet-grid-row-reverse) {
  flex-direction: row-reverse !important;
}

:host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-small) {
  flex-direction: column !important;
}
@media (max-width: 35.9375em) {
  :host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-small) {
    flex-direction: column !important;
  }
}

:host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-small) {
  flex-direction: column !important;
}
@media (min-width: 36em) {
  :host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-small) {
    flex-direction: column !important;
  }
}

:host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-medium) {
  flex-direction: column !important;
}
@media (min-width: 48em) {
  :host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-medium) {
    flex-direction: column !important;
  }
}

:host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-large) {
  flex-direction: column !important;
}
@media (min-width: 62em) {
  :host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-large) {
    flex-direction: column !important;
  }
}

:host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-large) {
  flex-direction: column !important;
}
@media (min-width: 64.0625em) {
  :host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-large) {
    flex-direction: column !important;
  }
}

:host(.duet-grid-variation-flex.duet-grid-align-top.duet-no-stacking) {
  align-items: flex-start !important;
}

:host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-no-stacking) {
  align-items: flex-end !important;
}

:host(.duet-grid-variation-flex.duet-grid-align-center.duet-no-stacking) {
  align-items: center !important;
}

.duet-grid-align-stretch.duet-no-stacking {
  align-items: stretch !important;
}

:host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-no-stacking) {
  align-items: baseline !important;
}

:host(.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-x-small) {
  align-items: flex-start !important;
}

:host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-x-small) {
  align-items: flex-end !important;
}

:host(.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-x-small) {
  align-items: center !important;
}

:host(.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-x-small) {
  align-items: stretch !important;
}

:host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-x-small) {
  align-items: baseline !important;
}

@media (min-width: 36em) {
  :host(.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-small) {
    align-items: flex-start !important;
  }
}

@media (min-width: 36em) {
  :host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-small) {
    align-items: flex-end !important;
  }
}

@media (min-width: 36em) {
  :host(.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-small) {
    align-items: center !important;
  }
}

@media (min-width: 36em) {
  :host(.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-small) {
    align-items: stretch !important;
  }
}

@media (min-width: 36em) {
  :host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-small) {
    align-items: baseline !important;
  }
}

@media (min-width: 48em) {
  :host(.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-medium) {
    align-items: flex-start !important;
  }
}

@media (min-width: 48em) {
  :host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-medium) {
    align-items: flex-end !important;
  }
}

@media (min-width: 48em) {
  :host(.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-medium) {
    align-items: center !important;
  }
}

@media (min-width: 48em) {
  :host(.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-medium) {
    align-items: stretch !important;
  }
}

@media (min-width: 48em) {
  :host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-medium) {
    align-items: baseline !important;
  }
}

@media (min-width: 62em) {
  :host(.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-large) {
    align-items: flex-start !important;
  }
}

@media (min-width: 62em) {
  :host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-large) {
    align-items: flex-end !important;
  }
}

@media (min-width: 62em) {
  :host(.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-large) {
    align-items: center !important;
  }
}

@media (min-width: 62em) {
  :host(.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-large) {
    align-items: stretch !important;
  }
}

@media (min-width: 62em) {
  :host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-large) {
    align-items: baseline !important;
  }
}

@media (min-width: 64.0625em) {
  :host(.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-x-large) {
    align-items: flex-start !important;
  }
}

@media (min-width: 64.0625em) {
  :host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-x-large) {
    align-items: flex-end !important;
  }
}

@media (min-width: 64.0625em) {
  :host(.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-x-large) {
    align-items: center !important;
  }
}

@media (min-width: 64.0625em) {
  :host(.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-x-large) {
    align-items: stretch !important;
  }
}

@media (min-width: 64.0625em) {
  :host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-x-large) {
    align-items: baseline !important;
  }
}

:host(.duet-grid-variation-flex.duet-grid-distribution-left) {
  justify-content: flex-start !important;
}

:host(.duet-grid-variation-flex.duet-grid-distribution-right) {
  justify-content: flex-end !important;
}

:host(.duet-grid-variation-flex.duet-grid-distribution-center) {
  justify-content: center !important;
}

:host(.duet-grid-variation-flex.duet-grid-distribution-between) {
  justify-content: space-between !important;
}

:host(.duet-grid-variation-flex.duet-grid-distribution-around) {
  justify-content: space-around !important;
}

:host(.duet-grid-variation-flex.duet-grid-distribution-evenly) {
  justify-content: space-evenly !important;
}

@media (max-width: 35.9375em) {
  :host(.duet-grid-variation-flex.duet-grid-mobile-left) {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

@media (max-width: 35.9375em) {
  :host(.duet-grid-variation-flex.duet-grid-mobile-center) {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  :host(.duet-grid-variation-flex.duet-grid-mobile-center) * {
    text-align: center !important;
  }
}

@media (max-width: 35.9375em) {
  :host(.duet-grid-variation-flex.duet-grid-mobile-right) {
    align-items: flex-end !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }
  :host(.duet-grid-variation-flex.duet-grid-mobile-right) * {
    text-align: right !important;
  }
}

:host(.duet-grid-variation-grid) {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  padding: 0 20px;
  container-type: inline-size;
  overflow-x: clip;
}
@media (min-width: 36em) {
  :host(.duet-grid-variation-grid) {
    gap: 24px;
    padding: 0 40px;
  }
}
@media (min-width: 48em) {
  :host(.duet-grid-variation-grid) {
    grid-template-columns: repeat(8, 55px);
    gap: 24px 32px;
    padding: 0;
  }
}
@media (min-width: 62em) {
  :host(.duet-grid-variation-grid) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: 0 64px;
  }
}
@media (min-width: 76.25em) {
  :host(.duet-grid-variation-grid) {
    grid-template-columns: repeat(12, 55px);
    gap: 40px;
    padding: 0;
  }
}

:host(.duet-grid-variation-grid.duet-grid-template-small) ::slotted(*) {
  grid-column: 1/span 4;
}
@media (min-width: 48em) {
  :host(.duet-grid-variation-grid.duet-grid-template-small) ::slotted(*) {
    grid-column: 1/span 8;
  }
}
@media (min-width: 62em) {
  :host(.duet-grid-variation-grid.duet-grid-template-small) ::slotted(*) {
    grid-column: 3/span 8;
  }
}

:host(.duet-grid-variation-grid.duet-grid-template-medium) ::slotted(*) {
  grid-column: 1/span 4;
}
@media (min-width: 48em) {
  :host(.duet-grid-variation-grid.duet-grid-template-medium) ::slotted(*) {
    grid-column: 1/span 8;
  }
}
@media (min-width: 62em) {
  :host(.duet-grid-variation-grid.duet-grid-template-medium) ::slotted(*) {
    grid-column: 2/span 10;
  }
}

:host(.duet-grid-variation-grid.duet-grid-template-large) ::slotted(*) {
  grid-column: 1/span 4;
}
@media (min-width: 48em) {
  :host(.duet-grid-variation-grid.duet-grid-template-large) ::slotted(*) {
    grid-column: 1/span 8;
  }
}
@media (min-width: 62em) {
  :host(.duet-grid-variation-grid.duet-grid-template-large) ::slotted(*) {
    grid-column: 1/span 12;
  }
}

:host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(odd)) {
  grid-column: 1/span 4;
}
@media (min-width: 48em) {
  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(odd)) {
    grid-column: 1/span 8;
  }
}
@media (min-width: 62em) {
  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(odd)) {
    grid-column: 1/span 8;
  }
}
:host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(even)) {
  grid-column: 1/span 4;
}
@media (min-width: 48em) {
  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(even)) {
    grid-column: 1/span 8;
  }
}
@media (min-width: 62em) {
  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(even)) {
    grid-column: 9/span 4;
  }
}

:host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(odd)) {
  grid-column: 1/span 4;
}
@media (min-width: 48em) {
  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(odd)) {
    grid-column: 1/span 8;
  }
}
@media (min-width: 62em) {
  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(odd)) {
    grid-column: 1/span 4;
  }
}
:host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(even)) {
  grid-column: 1/span 4;
}
@media (min-width: 48em) {
  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(even)) {
    grid-column: 1/span 8;
  }
}
@media (min-width: 62em) {
  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(even)) {
    grid-column: 5/span 8;
  }
}

:host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(odd)) {
  grid-column: 1/span 4;
}
@media (min-width: 48em) {
  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(odd)) {
    grid-column: 1/span 4;
  }
}
@media (min-width: 62em) {
  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(odd)) {
    grid-column: 1/span 6;
  }
}
:host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(even)) {
  grid-column: 1/span 4;
}
@media (min-width: 48em) {
  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(even)) {
    grid-column: 5/span 4;
  }
}
@media (min-width: 62em) {
  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(even)) {
    grid-column: 7/span 6;
  }
}

:host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+1)) {
  grid-column: 1/span 4;
}
@media (min-width: 48em) {
  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+1)) {
    grid-column: 1/span 8;
  }
}
@media (min-width: 62em) {
  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+1)) {
    grid-column: 1/span 4;
  }
}
:host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+2)) {
  grid-column: 1/span 4;
}
@media (min-width: 48em) {
  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+2)) {
    grid-column: 1/span 8;
  }
}
@media (min-width: 62em) {
  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+2)) {
    grid-column: 5/span 4;
  }
}
:host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+3)) {
  grid-column: 1/span 4;
}
@media (min-width: 48em) {
  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+3)) {
    grid-column: 1/span 8;
  }
}
@media (min-width: 62em) {
  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+3)) {
    grid-column: 9/span 4;
  }
}

:host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 0;
}
@media (min-width: 36em) {
  :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
    gap: 16px;
  }
}
@container (min-width: 664px) {
  :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (min-width: 1100px) {
  :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}