
.cms--content {
  float: inherit;
  padding-top: 2em;

  &.cms--flex > .is--component {
    display: flex!important;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;

    .float-right {
      order: 2;
    }
    .float-right {
      order: 1;
    }
  }

  .cms--flex-center {
    justify-content: center;
  }

  .image-container {
    .unitize-margin(0, 0, 10, 0);
    display: flex;
    align-items: center;

  }

  .text-container, > .is--component {
    display: flex;
    flex-wrap: wrap;
    align-content: center;

    h1, h2, h3, h4 {
      width: 100%;
    }

    .lead {
      font-size: 1.2em;
      margin-top: 2em;
      margin-bottom: 2em;
    }
  }

  .cms-textcol--small {
    flex: 1 0 33%;
  }
  .cms-textcol--wide {
    flex: 1 0 67%;
  }
}

.dreisc--responsive-iframe {
  width: 100%;
}
.dreisc--hr {
  border: 0 none;
  border-top: 1px @border-color solid;
  width: 100%;
  margin: 3em 0;
}

.full-width-padding-reset {
  padding: 0;
}

.full-width-margin-reset {
  margin: 0;
}

/**
 * Special case 100%
 */

.flex-100 {
  flex: 1 1 100%;
}


// Generates specific flex grid classes

@columnWidths: 20, 25, 30, 38, 50, 40, 64;
@columnGutter: 4;
@length: length(@columnWidths);

.make-flex-grids(@colWidths; @i; @prefix) when (@i > 0) {
  .make-flex-grids(@colWidths; (@i - 1); @prefix); // decrement.

  @colWidth: extract(@colWidths, @i);
  @colWidthMatch: 100 - @colWidth;

  .@{prefix}-@{colWidth} {
    flex: 0 0 (unit((@colWidth - @columnGutter/2), %));
  }

  .@{prefix}-@{colWidthMatch} {
    flex: 0 0 unit((@colWidthMatch - @columnGutter/2), %);
  }
}

@media (max-width: 479px) {
  .make-flex-grids(@columnWidths; @length; mobile-p--flex);
}

@media (min-width: 480px) and (max-width: 767px) {
  .make-flex-grids(@columnWidths; @length; mobile-l--flex);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .make-flex-grids(@columnWidths; @length; tablet-p--flex);
}

@media (min-width: 1024px) and (max-width: 1260px) {
  .make-flex-grids(@columnWidths; @length; tablet-l--flex);
}

@media (min-width: 1261px) {
  .make-flex-grids(@columnWidths; @length; desktop--flex);
  .make-flex-grids(@columnWidths; @length; desktop--width);
}

// Generates flex order classes

@orderCount: 10; //default
.make-flex-order(@orderCount) when (0 < @orderCount) {
  .make-flex-order(@orderCount - 1) ;

  .flex-order-@{orderCount} {
    order: @orderCount
  }
}

.make-flex-order(10);

