//////////////////////////
// LEGACY / OBJECTS / GRID
//////////////////////////


// Flexbox fallback styles for browsers that don't support CSS Grid
.dcf-grid,
.dcf-grid-full,
.dcf-grid-full\@sm,
.dcf-grid-full\@md,
.dcf-grid-full\@lg,
.dcf-grid-full\@xl,
.dcf-grid-halves,
.dcf-grid-halves\@sm,
.dcf-grid-halves\@md,
.dcf-grid-halves\@lg,
.dcf-grid-halves\@xl,
.dcf-grid-thirds,
.dcf-grid-thirds\@sm,
.dcf-grid-thirds\@md,
.dcf-grid-thirds\@lg,
.dcf-grid-thirds\@xl,
.dcf-grid-fourths,
.dcf-grid-fourths\@sm,
.dcf-grid-fourths\@md,
.dcf-grid-fourths\@lg,
.dcf-grid-fourths\@xl,
.dcf-grid-fifths\@md,
.dcf-grid-fifths\@lg,
.dcf-grid-fifths\@xl,
.dcf-grid-sixths\@md,
.dcf-grid-sixths\@lg,
.dcf-grid-sixths\@xl {
  display: flex;
  flex-wrap: wrap;
}

.dcf-grid-full > * {
  flex-basis: 100%;
}

.dcf-grid-halves > * {
  flex-basis: 50%;
}

.dcf-grid-thirds > * {
  flex-basis: 33%;
}

.dcf-grid-fourths > * {
  flex-basis: 25%;
}

.dcf-col-100\% {
  flex-basis: 100%;
}

.dcf-col-50\%-start {
  flex-basis: 50%;
}

.dcf-col-50\%-end {
  flex-basis: 50%;
}

.dcf-col-33\%-start {
  flex-basis: 33%;
}

.dcf-col-33\%-end {
  flex-basis: 33%;
}

.dcf-col-67\%-start {
  flex-basis: 67%;
}

.dcf-col-67\%-end {
  flex-basis: 67%;
}

.dcf-col-25\%-start {
  flex-basis: 25%;
}

.dcf-col-25\%-end {
  flex-basis: 25%;
}

.dcf-col-75\%-start {
  flex-basis: 75%;
}

.dcf-col-75\%-end {
  flex-basis: 75%;
}


@include mq(sm, min, width) {

  .dcf-grid-full\@sm > * {
    flex-basis: 100%;
  }

  .dcf-grid-halves\@sm > * {
    flex-basis: 50%;
  }

  .dcf-grid-thirds\@sm > * {
    flex-basis: 33%;
  }

  .dcf-grid-fourths\@sm > * {
    flex-basis: 25%;
  }

  .dcf-col-100\%\@sm {
    flex-basis: 100%;
  }

  .dcf-col-50\%-start\@sm {
    flex-basis: 50%;
  }

  .dcf-col-50\%-end\@sm {
    flex-basis: 50%;
  }

  .dcf-col-33\%-start\@sm {
    flex-basis: 33%;
  }

  .dcf-col-33\%-end\@sm {
    flex-basis: 33%;
  }

  .dcf-col-67\%-start\@sm {
    flex-basis: 67%;
  }

  .dcf-col-67\%-end\@sm {
    flex-basis: 67%;
  }

  .dcf-col-25\%-start\@sm {
    flex-basis: 25%;
  }

  .dcf-col-25\%-end\@sm {
    flex-basis: 25%;
  }

  .dcf-col-75\%-start\@sm {
    flex-basis: 75%;
  }

  .dcf-col-75\%-end\@sm {
    flex-basis: 75%;
  }

}


@include mq(md, min, width) {

  .dcf-grid-full\@md > * {
    flex-basis: 100%;
  }

  .dcf-grid-halves\@md > * {
    flex-basis: 50%;
  }

  .dcf-grid-thirds\@md > * {
    flex-basis: 33%;
  }

  .dcf-grid-fourths\@md > * {
    flex-basis: 25%;
  }

  .dcf-grid-fifths\@md > * {
    flex-basis: 20%;
  }

  .dcf-grid-sixths\@md > * {
    flex-basis: 16.66%;
  }

  .dcf-col-100\%\@md {
    flex-basis: 100%;
  }

  .dcf-col-50\%-start\@md {
    flex-basis: 50%;
  }

  .dcf-col-50\%-end\@md {
    flex-basis: 50%;
  }

  .dcf-col-33\%-start\@md {
    flex-basis: 33%;
  }

  .dcf-col-33\%-end\@md {
    flex-basis: 33%;
  }

  .dcf-col-67\%-start\@md {
    flex-basis: 67%;
  }

  .dcf-col-67\%-end\@md {
    flex-basis: 67%;
  }

  .dcf-col-25\%-start\@md {
    flex-basis: 25%;
  }

  .dcf-col-25\%-end\@md {
    flex-basis: 25%;
  }

  .dcf-col-75\%-start\@md {
    flex-basis: 75%;
  }

  .dcf-col-75\%-end\@md {
    flex-basis: 75%;
  }

}


@include mq(lg, min, width) {

  .dcf-grid-full\@lg > * {
    flex-basis: 100%;
  }

  .dcf-grid-halves\@lg > * {
    flex-basis: 50%;
  }

  .dcf-grid-thirds\@lg > * {
    flex-basis: 33%;
  }

  .dcf-grid-fourths\@lg > * {
    flex-basis: 25%;
  }

  .dcf-grid-fifths\@lg > * {
    flex-basis: 20%;
  }

  .dcf-grid-sixths\@lg > * {
    flex-basis: 16.66%;
  }

  .dcf-col-100\%\@lg {
    flex-basis: 100%;
  }

  .dcf-col-50\%-start\@lg {
    flex-basis: 50%;
  }

  .dcf-col-50\%-end\@lg {
    flex-basis: 50%;
  }

  .dcf-col-33\%-start\@lg {
    flex-basis: 33%;
  }

  .dcf-col-33\%-end\@lg {
    flex-basis: 33%;
  }

  .dcf-col-67\%-start\@lg {
    flex-basis: 67%;
  }

  .dcf-col-67\%-end\@lg {
    flex-basis: 67%;
  }

  .dcf-col-25\%-start\@lg {
    flex-basis: 25%;
  }

  .dcf-col-25\%-end\@lg {
    flex-basis: 25%;
  }

  .dcf-col-75\%-start\@lg {
    flex-basis: 75%;
  }

  .dcf-col-75\%-end\@lg {
    flex-basis: 75%;
  }

}


@include mq(xl, min, width) {

  .dcf-grid-full\@xl > * {
    flex-basis: 100%;
  }

  .dcf-grid-halves\@xl > * {
    flex-basis: 50%;
  }

  .dcf-grid-thirds\@xl > * {
    flex-basis: 33%;
  }

  .dcf-grid-fourths\@xl > * {
    flex-basis: 25%;
  }

  .dcf-grid-fifths\@xl > * {
    flex-basis: 20%;
  }

  .dcf-grid-sixths\@xl > * {
    flex-basis: 16.66%;
  }

  .dcf-col-100\%\@xl {
    flex-basis: 100%;
  }

  .dcf-col-50\%-start\@xl {
    flex-basis: 50%;
  }

  .dcf-col-50\%-end\@xl {
    flex-basis: 50%;
  }

  .dcf-col-33\%-start\@xl {
    flex-basis: 33%;
  }

  .dcf-col-33\%-end\@xl {
    flex-basis: 33%;
  }

  .dcf-col-67\%-start\@xl {
    flex-basis: 67%;
  }

  .dcf-col-67\%-end\@xl {
    flex-basis: 67%;
  }

  .dcf-col-25\%-start\@xl {
    flex-basis: 25%;
  }

  .dcf-col-25\%-end\@xl {
    flex-basis: 25%;
  }

  .dcf-col-75\%-start\@xl {
    flex-basis: 75%;
  }

  .dcf-col-75\%-end\@xl {
    flex-basis: 75%;
  }

}