:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

:host([justify-content-flex-start]) {
  justify-content: flex-start;
}

:host([align-content-flex-start]) {
  align-content: flex-start;
}

:host([justify-content-flex-end]) {
  justify-content: flex-end;
}

:host([align-content-flex-end]) {
  align-content: flex-end;
}

:host([justify-content-center]) {
  justify-content: center;
}

:host([align-content-center]) {
  align-content: center;
}

:host([justify-content-space-between]) {
  justify-content: space-between;
}

:host([align-content-space-between]) {
  align-content: space-between;
}

:host([justify-content-space-around]) {
  justify-content: space-around;
}

:host([align-content-space-around]) {
  align-content: space-around;
}

:host([justify-content-space-evenly]) {
  justify-content: space-evenly;
}

:host([align-content-space-evenly]) {
  align-content: space-evenly;
}

:host([justify-content-stretch]) {
  justify-content: stretch;
}

:host([align-content-stretch]) {
  align-content: stretch;
}

:host([align-items-flex-start]) {
  align-items: flex-start;
}

:host([align-items-flex-end]) {
  align-items: flex-end;
}

:host([align-items-center]) {
  align-items: center;
}

:host([align-items-baseline]) {
  align-items: baseline;
}

:host([align-items-stretch]) {
  align-items: stretch;
}

:host {
  display: grid;
}

:host([sl-cols="1"]) {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

:host([sl-cols="2"]) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:host([sl-cols="3"]) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:host([sl-cols="4"]) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:host([sl-cols="5"]) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

:host([sl-cols="6"]) {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

:host([sl-cols="7"]) {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

:host([sl-cols="8"]) {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

:host([sl-cols="9"]) {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

:host([sl-cols="10"]) {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

:host([sl-cols="11"]) {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

:host([sl-cols="12"]) {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

:host([sl-gap="0"]) {
  gap: 0rem;
}

:host([sl-gap-x="0"]) {
  column-gap: 0rem;
}

:host([sl-gap-y="0"]) {
  row-gap: 0rem;
}

:host([sl-gap="1"]) {
  gap: 0.125rem;
}

:host([sl-gap-x="1"]) {
  column-gap: 0.125rem;
}

:host([sl-gap-y="1"]) {
  row-gap: 0.125rem;
}

:host([sl-gap="2"]) {
  gap: 0.25rem;
}

:host([sl-gap-x="2"]) {
  column-gap: 0.25rem;
}

:host([sl-gap-y="2"]) {
  row-gap: 0.25rem;
}

:host([sl-gap="3"]) {
  gap: 0.5rem;
}

:host([sl-gap-x="3"]) {
  column-gap: 0.5rem;
}

:host([sl-gap-y="3"]) {
  row-gap: 0.5rem;
}

:host([sl-gap="4"]) {
  gap: 0.75rem;
}

:host([sl-gap-x="4"]) {
  column-gap: 0.75rem;
}

:host([sl-gap-y="4"]) {
  row-gap: 0.75rem;
}

:host([sl-gap="5"]) {
  gap: 1rem;
}

:host([sl-gap-x="5"]) {
  column-gap: 1rem;
}

:host([sl-gap-y="5"]) {
  row-gap: 1rem;
}

:host([sl-gap="6"]) {
  gap: 1.5rem;
}

:host([sl-gap-x="6"]) {
  column-gap: 1.5rem;
}

:host([sl-gap-y="6"]) {
  row-gap: 1.5rem;
}

:host([sl-gap="7"]) {
  gap: 2rem;
}

:host([sl-gap-x="7"]) {
  column-gap: 2rem;
}

:host([sl-gap-y="7"]) {
  row-gap: 2rem;
}

:host([sl-gap="8"]) {
  gap: 3rem;
}

:host([sl-gap-x="8"]) {
  column-gap: 3rem;
}

:host([sl-gap-y="8"]) {
  row-gap: 3rem;
}

:host([sl-gap="9"]) {
  gap: 4rem;
}

:host([sl-gap-x="9"]) {
  column-gap: 4rem;
}

:host([sl-gap-y="9"]) {
  row-gap: 4rem;
}

:host([justify-items-start]) {
  justify-items: start;
}

:host([justify-items-end]) {
  justify-items: end;
}

:host([justify-items-center]) {
  justify-items: center;
}

:host([justify-items-stretch]) {
  justify-items: stretch;
}

@media only screen and (max-width: 600px) {
  :host([sl-cols-sm="1"]) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  :host([sl-cols-sm="2"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :host([sl-cols-sm="3"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :host([sl-cols-sm="4"]) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :host([sl-cols-sm="5"]) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  :host([sl-cols-sm="6"]) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  :host([sl-cols-sm="7"]) {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  :host([sl-cols-sm="8"]) {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  :host([sl-cols-sm="9"]) {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  :host([sl-cols-sm="10"]) {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  :host([sl-cols-sm="11"]) {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  :host([sl-cols-sm="12"]) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 600px) {
  :host([sl-cols-md="1"]) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  :host([sl-cols-md="2"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :host([sl-cols-md="3"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :host([sl-cols-md="4"]) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :host([sl-cols-md="5"]) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  :host([sl-cols-md="6"]) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  :host([sl-cols-md="7"]) {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  :host([sl-cols-md="8"]) {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  :host([sl-cols-md="9"]) {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  :host([sl-cols-md="10"]) {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  :host([sl-cols-md="11"]) {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  :host([sl-cols-md="12"]) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 1025px) {
  :host([sl-cols-lg="1"]) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  :host([sl-cols-lg="2"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :host([sl-cols-lg="3"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :host([sl-cols-lg="4"]) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :host([sl-cols-lg="5"]) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  :host([sl-cols-lg="6"]) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  :host([sl-cols-lg="7"]) {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  :host([sl-cols-lg="8"]) {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  :host([sl-cols-lg="9"]) {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  :host([sl-cols-lg="10"]) {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  :host([sl-cols-lg="11"]) {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  :host([sl-cols-lg="12"]) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
::slotted([sl-col-span="1"]) {
  grid-column: span 1/span 1;
}

::slotted([sl-col-start="1"]) {
  grid-column-start: 1;
}

::slotted([sl-colend="1"]) {
  grid-column-end: 1;
}

::slotted([sl-col-span="2"]) {
  grid-column: span 2/span 2;
}

::slotted([sl-col-start="2"]) {
  grid-column-start: 2;
}

::slotted([sl-colend="2"]) {
  grid-column-end: 2;
}

::slotted([sl-col-span="3"]) {
  grid-column: span 3/span 3;
}

::slotted([sl-col-start="3"]) {
  grid-column-start: 3;
}

::slotted([sl-colend="3"]) {
  grid-column-end: 3;
}

::slotted([sl-col-span="4"]) {
  grid-column: span 4/span 4;
}

::slotted([sl-col-start="4"]) {
  grid-column-start: 4;
}

::slotted([sl-colend="4"]) {
  grid-column-end: 4;
}

::slotted([sl-col-span="5"]) {
  grid-column: span 5/span 5;
}

::slotted([sl-col-start="5"]) {
  grid-column-start: 5;
}

::slotted([sl-colend="5"]) {
  grid-column-end: 5;
}

::slotted([sl-col-span="6"]) {
  grid-column: span 6/span 6;
}

::slotted([sl-col-start="6"]) {
  grid-column-start: 6;
}

::slotted([sl-colend="6"]) {
  grid-column-end: 6;
}

::slotted([sl-col-span="7"]) {
  grid-column: span 7/span 7;
}

::slotted([sl-col-start="7"]) {
  grid-column-start: 7;
}

::slotted([sl-colend="7"]) {
  grid-column-end: 7;
}

::slotted([sl-col-span="8"]) {
  grid-column: span 8/span 8;
}

::slotted([sl-col-start="8"]) {
  grid-column-start: 8;
}

::slotted([sl-colend="8"]) {
  grid-column-end: 8;
}

::slotted([sl-col-span="9"]) {
  grid-column: span 9/span 9;
}

::slotted([sl-col-start="9"]) {
  grid-column-start: 9;
}

::slotted([sl-colend="9"]) {
  grid-column-end: 9;
}

::slotted([sl-col-span="10"]) {
  grid-column: span 10/span 10;
}

::slotted([sl-col-start="10"]) {
  grid-column-start: 10;
}

::slotted([sl-colend="10"]) {
  grid-column-end: 10;
}

::slotted([sl-col-span="11"]) {
  grid-column: span 11/span 11;
}

::slotted([sl-col-start="11"]) {
  grid-column-start: 11;
}

::slotted([sl-colend="11"]) {
  grid-column-end: 11;
}

::slotted([sl-col-span="12"]) {
  grid-column: span 12/span 12;
}

::slotted([sl-col-start="12"]) {
  grid-column-start: 12;
}

::slotted([sl-colend="12"]) {
  grid-column-end: 12;
}

::slotted([justify-self-auto]) {
  justify-self: auto;
}

::slotted([justify-self-start]) {
  justify-self: start;
}

::slotted([justify-self-end]) {
  justify-self: end;
}

::slotted([justify-self-center]) {
  justify-self: center;
}

::slotted([justify-self-stretch]) {
  justify-self: stretch;
}