// used on all blog post modules except one.html
%article {
    border-bottom: 1px solid palette(gray, mid--light);
    padding-bottom: size(15);
    margin-bottom: size(15);
    flex: $col-twelve;

    @media #{$bp-beta} {
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    h2 {
        margin-bottom: size(5);
    }

    .text {
        a, h2, i, .meta {
            color: palette(gray, light);
        }
    }
}

// used on all blog post modules except one.html
.article-border {

    @media #{$bp-beta} {
        border-top: 1px solid palette(gray, mid--light);
        padding-top: size(20);
        margin-top: size(20);
    }
}

// style for one.html
.article--one {
    flex: 1;

    &:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    h2 {
        margin-bottom: size(5);
    }

    .img {
        flex: $col-twelve;
        margin-bottom: size(15);

        @media #{$bp-beta} {
            margin-bottom: 0;
            flex: 1;
            margin-right: size(30);
        }
    }

    .text {
        flex: $col-twelve;

        @media #{$bp-beta} {
            flex: 2.5;
        }

        a, h2, i, p, .meta {
            color: palette(gray, dark);
            font-weight: 200;
            margin-top: 0;
        }
    }
}

// style for row-left.html
.article--two-left {
    @extend %article;

    .center {
        height: auto;
    }

    .img {
        margin-bottom: size(15);
    }

    @media #{$bp-beta} {
        &:first-child {
            border-right: 1px solid palette(gray, mid--light);
            flex: 2;
            margin-right: size(15);
            padding-right: size(15);
        }

        &:last-child {
            flex: 1;
        }

        .img {
            height: 10rem;
            overflow: hidden;
        }
    }

    @media #{$bp-gamma} {
        &:first-child {
            flex: 3;
        }
    }
}

// style for row-right.html
.article--two-right {
    @extend %article;

    .center {
        height: auto;
    }

    .img {
        margin-bottom: size(15);
    }

    @media #{$bp-beta} {
        &:first-child {
            border-right: 1px solid palette(gray, mid--light);
            flex: 1;
            margin-right: size(15);
            padding-right: size(15);
        }

        &:last-child {
            flex: 2;
        }

        .img {
            height: 10rem;
            overflow: hidden;
        }
    }

    @media #{$bp-gamma} {
        &:last-child {
            flex: 3;
        }
    }
}

// style for three.html and three-uniform.html
.article--three {
    @extend %article;

    @media #{$bp-beta} {
        border-bottom: 0;
        border-right: 1px solid palette(gray, mid--light);
        flex: 1;
        margin-right: size(15);
        padding-right: size(15);

        &:last-child {
            border-right: 0;
            margin-right: 0;
            padding-right: 0;
        }
    }

    h2 {
        margin-bottom: size(5);
    }

    // style used on three-uniform.html for images as background
    .img {
        @extend %bg-img;
        height: 25rem;
        padding: size(20);
    }
}

// large block background image with text over top of it
.article--block-lrg {
    @extend %article;

    .img {
        @extend %bg-img;
        height: 25rem;
        padding: size(20);
    }

    @media #{$bp-beta} {
            flex: 1;
            margin-right: size(15);

        .img {
            height: 30rem;
        }
    }

    @media #{$bp-gamma} {
        flex: 2;
    }
}

// small block background image with text over top of it
.article--block-sml {
    @extend %article;

    .img {
        @extend %bg-img;
        height: 25rem;
        padding: size(20);
    }

    .text {
        a, h2, i, .meta {
            color: palette(gray, light);
        }
    }

    @media #{$bp-beta} {

        &:last-child {
            margin-top: size(15);
        }

        .img {
            height: 14.55rem;
        }
    }
}

// container for block background image with text over top of it
.article--sml {
    flex: $col-twelve;

    @media #{$bp-beta} {
        flex: 1;
    }
}


// article info shown on search, banners and throughout
.meta {
    color: palette(gray, mid);
    font-family: $font-beta;
    font-size: .8rem;
    font-style: italic;
    margin-bottom: size(20);

    i {
        color: palette(gray, mid);
        margin-right: size(5);
    }

    .category, .byline, .comments {
        display: inline-block;
        font-weight: 200;
        transition: .15s ease-in;
    }

    .category span {
        margin-left: size(5);
    }

    .tags {
        font-family: $font-alpha;
        font-size: .7rem;
        font-style: normal;
        font-weight: 600;
        margin-left: size(15);
    }
}
