.cp-blog {
    overflow: hidden;
    &__inner {
        display: flex;
        padding: 0 0 20px;
        @include mq(tablet-wide,max) {
            flex-wrap: wrap;
        }
    }
    &__posts {
        position: relative;
        flex-basis: 50%;
        flex-grow: 1;
        padding: 0 10px 0 0;
        &--no-title {
            padding: 20px 10px 0 0;
            &.cp-blog__posts--full-width {
                padding: 20px 0;
            }
            @include mq(tablet-wide,max) {
                padding: 20px 0!important;
            }
        }
        .archive & {
            width: 100%;
            padding: 0;
        }
        .blog & {
            width: 100%;
            padding: 0;
        }
        &--full-width {
            width: 100%;
            padding: 0;
            &:after {
                content: "";
                position: absolute;
                top:0;
                left:100%;
                height: 100%;
                width: 100%;
            }
        }
        &--hide {
            display: none;
        }
        @include mq(tablet-wide,max) {
            width: 100%;
            flex-basis: 100%;
            padding: 0;
            &:after {
                content: "";
                position: absolute;
                top:0;
                left:100%;
                height: 100%;
                width: 100%;
            }            
        }
        &:before {
            content: "";
            position: absolute;
            top:0;
            left:-100%;
            height: 100%;
            width: 100%;
        }
    }
    &__post {
        padding: 20px;
        margin: 0 0 20px;
        border:solid 2px transparent;
        @include mq(tablet-wide,max) {
            margin: 0 0 10px;
        }
        @include mq(tablet-small,max) {
            padding: 10px;
        }
        &-title {
            @include font-quicksand($purple, 20px);
            margin: 0 0 10px;
        }
        &-author {
            @include font-quicksand(none, 14px, 1, 300);
        }
        &-cta {
            a {
            }      
        }
    }
    &__stream {
        position: relative;
        flex-basis: 50%;
        flex-grow: 1;
        padding: 0 0 0 10px;
        &--hide {
            display: none!important;
        }
        &--vods-only {
            .cp-blog__vods {
                grid-template-columns: repeat(3, calc(33% - 4px));
            }
            &:after {
                content: "";
                position: absolute;
                top:0;
                left:-100%;
                height: 100%;
                width: 100%;
            }              
        }
        @include mq(tablet-wide,max) {
            width: 100%;
            flex-basis: 100%;
            padding: 0 0 10px;
        }
        &:before {
            content: "";
            position: absolute;
            top:0;
            left:100%;
            height: 100%;
            width: 100%;
        }        
    }
    &__vods {
        display: grid;
        grid-template-columns: repeat(2, calc(50% - 10px));
        grid-gap: 20px;
        &--no-title {
            padding: 20px 0 20px 10px;
            @include mq(tablet-wide,max) {
                padding: 20px 0;
            }
        }        
        @include mq(tablet-wide,max) {
            grid-gap: 10px;
            grid-template-columns: repeat(3, calc(33% - 4px));
        }
        @include mq(tablet-small,max) {
            grid-template-columns: repeat(2, calc(50% - 5px))!important;
        }
        @include mq(phone-wide,max) {
            grid-template-columns: repeat(1, calc(100%))!important;
        }
        &-tile {
            overflow: hidden;
            border:solid 2px transparent;
            position: relative;
            &:hover {
                .cp-blog__vods-overlay {
                    opacity: 1;
                    transform: scale(1);
                }
            }
        } 
        &-image {
            width: 100%;
            vertical-align: top;
        }
        &-title {
            position: absolute;
        }
        &-overlay {
            position: absolute;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            display: flex;
            opacity: 0;
            transform: scale(2);
            align-items: center;
            justify-content: center;
            transition: all .35s ease;
            background-color: rgba(0,0,0,.5);
            span {
                width: 40px;
                height: 40px;
                font-size: 40px;
                color: #fff;
            }
        }
        &-link {
            display: block;
            position: relative;
        }
        .demo-content {
            &__streams {
                aspect-ratio: 16/9;
                height: auto;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                text-transform: uppercase;
            }
        }
    }
    &__news {
        width: 50%;
        margin: 0  0 0 10px;
    }
    &__title {
        h3 {
            @include font-quicksand($white,20px);
        }
    }
}