:root,
:host {
  --grid-cols: 1;
	--gutter: 15px;
}

.grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: calc(var(--gutter) * 2);
}
.grid__cell {
	grid-column: span var(--grid-cols);
}

@media (min-width: 540px) {
  :root,
  :host {
    --grid-cols: 12;
  }
  .grid__cell {
    grid-column: span var(--grid-col-span-s);
  }
}

@media (min-width: 960px) {
  .grid__cell {
    grid-column: span var(--grid-col-span-m);
  }
}

@media (min-width: 1050px) {
  .grid__cell {
    grid-column: span var(--grid-col-span-l);
  }
}