.dx-layout {
  display: grid;
  gap: var(--dx-space-lg, var(--space-005));
}

.dx-grid-12,
.columns-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.dx-row,
.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--dx-space-md, var(--space-004));
}

.dx-col-12,
.col.dx-col-12,
.span-12 {
  grid-column: span 12;
}

.dx-col-8,
.col.dx-col-8,
.span-8 {
  grid-column: span 8;
}

.dx-col-6,
.col.dx-col-6,
.span-6 {
  grid-column: span 6;
}

.dx-col-4,
.col.dx-col-4,
.span-4 {
  grid-column: span 4;
}

.dx-col-3,
.col.dx-col-3,
.span-3 {
  grid-column: span 3;
}

@media (max-width: 960px) {
  .dx-row,
  .row {
    grid-template-columns: 1fr;
    gap: var(--dx-space-sm, var(--space-003));
  }

  [class*='dx-col-'],
  [class*='span-'] {
    grid-column: auto !important;
  }
}