.cp-blog {
    //background: $lightGray;
    &__inner {
        display: flex;
        @include mq(tablet-wide,max) {
            flex-wrap: wrap;
        }
    }
    &__posts {
        width: 50%;
        padding: 0 10px 0 0;
        .archive & {
            width: 100%;
            padding: 0;
        }
        .blog & {
            width: 100%;
            padding: 0;
        }
        &--full-width {
            width: 100%;
            padding: 0;
        }
        @include mq(tablet-wide,max) {
            width: 100%;
            padding: 0;
        }
    }
    &__post {
        //background: $darkGray;
        padding: 20px;
        margin: 0 0 20px;
        @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 {
                background: $purple;
            }      
        }
    }
    &__stream {
        display: none;
        width: 50%;
        padding: 0 0 0 10px;
        @include mq(tablet-wide,max) {
            width: 100%;
            padding: 0 0 10px;
        }
    }
    &__vods {
        display: grid;
        grid-template-columns: repeat(2, calc(50% - 10px));
        grid-gap: 20px;
        margin: 0 0 20px;
        @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));
        }
        @include mq(phone-wide,max) {
            grid-template-columns: repeat(1, calc(100%));
        }
        &-tile {
            overflow: hidden;
            &: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;
        }
    }
    &__news {
        width: 50%;
        margin: 0  0 0 10px;
    }
    &__title {
        h3 {
            @include font-quicksand($white,20px);
        }
    }
}