:host {
  --grid-column-start: "";
  --grid-column-end: "";
  --grid-row-start: "";
  --grid-row-end: "";
  --justify-self: "";
  --align-self: "";
  --z-index: "";
  --xs-grid-column-start: "";
  --xs-grid-column-end: "";
  --xs-grid-row-start: "";
  --xs-grid-row-end: "";
  --xs-justify-self: "";
  --xs-align-self: "";
  --xs-z-index: "";
  --sm-grid-column-start: "";
  --sm-grid-column-end: "";
  --sm-grid-row-start: "";
  --sm-grid-row-end: "";
  --sm-justify-self: "";
  --sm-align-self: "";
  --sm-z-index: "";
  --md-grid-column-start: "";
  --md-grid-column-end: "";
  --md-grid-row-start: "";
  --md-grid-row-end: "";
  --md-justify-self: "";
  --md-align-self: "";
  --md-z-index: "";
  --lg-grid-column-start: "";
  --lg-grid-column-end: "";
  --lg-grid-row-start: "";
  --lg-grid-row-end: "";
  --lg-justify-self: "";
  --lg-align-self: "";
  --lg-z-index: "";
  --xl-grid-column-start: "";
  --xl-grid-column-end: "";
  --xl-grid-row-start: "";
  --xl-grid-row-end: "";
  --xl-justify-self: "";
  --xl-align-self: "";
  --xl-z-index: "";
}

:host {
  grid-column-start: var(--grid-column-start);
  grid-column-end: var(--grid-column-end);
  grid-row-start: var(--grid-row-start);
  grid-row-end: var(--grid-row-end);
  justify-self: var(--justify-self);
  align-self: var(--align-self);
  z-index: var(--z-index);
}

@media screen and (min-width: 480px) {
  :host {
    grid-column-start: var(--xs-grid-column-start);
    grid-column-end: var(--xs-grid-column-end);
    grid-row-start: var(--xs-grid-row-start);
    grid-row-end: var(--xs-grid-row-end);
    justify-self: var(--xs-justify-self);
    align-self: var(--xs-align-self);
    z-index: var(--xs-z-index);
  }
}
@media screen and (min-width: 768px) {
  :host {
    grid-column-start: var(--sm-grid-column-start);
    grid-column-end: var(--sm-grid-column-end);
    grid-row-start: var(--sm-grid-row-start);
    grid-row-end: var(--sm-grid-row-end);
    justify-self: var(--sm-justify-self);
    align-self: var(--sm-align-self);
    z-index: var(--sm-z-index);
  }
}
@media screen and (min-width: 992px) {
  :host {
    grid-column-start: var(--md-grid-column-start);
    grid-column-end: var(--md-grid-column-end);
    grid-row-start: var(--md-grid-row-start);
    grid-row-end: var(--md-grid-row-end);
    justify-self: var(--md-justify-self);
    align-self: var(--md-align-self);
    z-index: var(--md-z-index);
  }
}
@media screen and (min-width: 1200px) {
  :host {
    grid-column-start: var(--lg-grid-column-start);
    grid-column-end: var(--lg-grid-column-end);
    grid-row-start: var(--lg-grid-row-start);
    grid-row-end: var(--lg-grid-row-end);
    justify-self: var(--lg-justify-self);
    align-self: var(--lg-align-self);
    z-index: var(--lg-z-index);
  }
}
@media screen and (min-width: 1400px) {
  :host {
    grid-column-start: var(--xl-grid-column-start);
    grid-column-end: var(--xl-grid-column-end);
    grid-row-start: var(--xl-grid-row-start);
    grid-row-end: var(--xl-grid-row-end);
    justify-self: var(--xl-justify-self);
    align-self: var(--xl-align-self);
    z-index: var(--xl-z-index);
  }
}