:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

.dnd-section {
  padding: 0;
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 1rem;
}

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.row-fluid .span1,
.row-fluid .span2,
.row-fluid .span3,
.row-fluid .span4,
.row-fluid .span5,
.row-fluid .span6,
.row-fluid .span7,
.row-fluid .span8,
.row-fluid .span9,
.row-fluid .span10,
.row-fluid .span11,
.row-fluid .span12 {
  min-height: 1px;
  width: 100%;
}

.container-fluid {
  width: 100%;
}

.dnd-row,
.dnd-module {
  box-sizing: border-box;
  min-width: 0;
}

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .row-fluid .span1 {
    width: calc(
      var(--column-width-multiplier) * 1% * 1 - var(--column-gap) *
        (11 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span2 {
    width: calc(
      var(--column-width-multiplier) * 1% * 2 - var(--column-gap) *
        (10 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span3 {
    width: calc(
      var(--column-width-multiplier) * 1% * 3 - var(--column-gap) *
        (9 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span4 {
    width: calc(
      var(--column-width-multiplier) * 1% * 4 - var(--column-gap) *
        (8 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span5 {
    width: calc(
      var(--column-width-multiplier) * 1% * 5 - var(--column-gap) *
        (7 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span6 {
    width: calc(
      var(--column-width-multiplier) * 1% * 6 - var(--column-gap) *
        (6 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span7 {
    width: calc(
      var(--column-width-multiplier) * 1% * 7 - var(--column-gap) *
        (5 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span8 {
    width: calc(
      var(--column-width-multiplier) * 1% * 8 - var(--column-gap) *
        (4 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span9 {
    width: calc(
      var(--column-width-multiplier) * 1% * 9 - var(--column-gap) *
        (3 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span10 {
    width: calc(
      var(--column-width-multiplier) * 1% * 10 - var(--column-gap) *
        (2 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span11 {
    width: calc(
      var(--column-width-multiplier) * 1% * 11 - var(--column-gap) *
        (1 * var(--column-width-multiplier) / 100)
    );
  }
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}