/*------------------------------------*\
    # GRID DEMO
\*------------------------------------*/

.gel-c-grid-demo-section {
  margin-top: double($gel-spacing-unit);
  border-top: 1px solid $gel-color--alto;
  padding-top: double($gel-spacing-unit);
}

.gel-c-grid-demo__summary {
  margin-top: halve($gel-spacing-unit);
  color: $gel-color--cod-gray;
}

/**
 * A placeholder element to demostrate grid sizing
 */
.gel-c-grid-demo-item {
  width: 100%;
  padding: $gel-spacing-unit;

  background-color: #d4e7eb;
  color: $gel-color--black;

  @if $enhanced {
    @include mq($from: gel-bp-s) {
      padding: double($gel-spacing-unit);
    }
  }
}

.gel-c-grid-demo-item--fill {
  background: repeating-linear-gradient(180deg, #d4e7eb, #d4e7eb 8px, #aec4cc 8px, #aec4cc 16px);
}

.gel-c-grid-demo-item--auto {
  height: auto;
}

.gel-c-grid-demo-item--large {
  height: 144px;
}

/**
 * A basic GEL Promo pattern
 */
.gel-c-grid-demo-promo {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.gel-c-grid-demo-promo__image {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.gel-c-grid-demo-promo__body {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
}