/*------------------------------------*\
    # 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;
}