:root {
  --max-content-width: 1400px;
  --grid-columns: 12;
  --grid-padding: 2rem;
}

.ls-component {
  --grid-columns: 12;
  --grid-padding: 15px;

  display: grid;
  grid-template-columns:
    minmax(var(--grid-padding), 1fr) repeat(
      var(--grid-columns),
      minmax(0, calc(var(--max-content-width) / var(--grid-columns)))
    )
    minmax(var(--grid-padding), 1fr);
}

.ls-component > * {
  grid-column: 1 / -1;

  display: grid;
  grid-template-columns: subgrid;
}

.ls-component > * > * {
  grid-column: 2 / -2;
}

@media (min-width: 576px) {
  :root {
    --max-content-width: 576px;
  }
}

@media (min-width: 768px) {
  :root {
    --max-content-width: 768px;
  }
}

@media (min-width: 992px) {
  :root {
    --max-content-width: 992px;
  }
}

@media (min-width: 1200px) {
  :root {
    --max-content-width: 1200px;
  }
}

@media (min-width: 1720px) {
  :root {
    --max-content-width: 1720px;
  }
}