Calculate percentage based grid columns + gaps to set a fixed size for an element spanning n columns, for reasons.

calculate-grid-col-width.js

const calculateGridItemWidth = (span, cols = 24, gap = 16) =>
  ((window.innerWidth - (cols + 1) * gap) / cols) * span + gap * (span - 1);

this.calculateGridItemWidth(18)

--col-gap: 16px;
--total-cols: 6;
--slide-span: 6;
--slide-max: 1074px;
--slide-inset: 12px;
--slide-insets: calc(var(--slide-inset) * 2);
--slide-cols: ((100vw - (var(--total-cols) + 1) * var(--col-gap)) / var(--total-cols)) * var(--slide-span);
--slide-gaps: var(--col-gap) * (var(--slide-span) - 1);

padding: 0 var(--slide-inset);
width: calc(var(--slide-cols) + var(--slide-gaps) + var(--slide-insets));
max-width: calc(var(--slide-max) + var(--slide-insets));

@media (min-width: 768px) {
     --total-cols: 24;
     --slide-span: 22;
}
@media (min-width: 1024px) {
     --slide-span: 18;
}