.b-sponsored,
.b-staff-picks {
    margin-top: 60px !important;

    .box__caption {
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 15px;

        span {
            padding-left: 15px;
        }
    }

    .row + .row {
        margin-top: 30px;
    }
}

.b-fcats {
    margin-bottom: 60px;

    .box__caption {
        text-transform: uppercase;
        margin-bottom: 15px;
    }
}

.b-post {
    position: relative;

    &__image {
        display: block;
        text-decoration: none;
        overflow: hidden;
        border-radius: 2px;

        img {
            .transition(@transition);
        }
    }

    &:hover {

        .b-post__image img {
            .scale(1.1);
        }
    }

    &__cat {
        background: @brand-dark;
        text-transform: uppercase;
        font-family: @headings-font-family;
        font-weight: @headings-font-weight;
        color: #fff;
        position: absolute;
        left: 20px;
        top: 20px;
        padding: 2px 6px;
        font-size: 10px;
        text-decoration: none;
        border-radius: 2px;
        .transition(@transition);

        &:hover {
            background: @brand-accent;
            color: #fff;
        }
    }

    &__body {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0 0 2px 2px;
        padding: 20px 20px 20px;
        // background: fade(@brand-dark, 70%);
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#d9000000',GradientType=0 );

        span {
            display: block;
            font-size: 12px;
            color: fade(#fff, 70%);
        }

        h4 {
            margin: 0;
            font-size: 20px;

            a {
                color: #fff;
                text-decoration: none;

                &:hover {
                    color: @brand-accent;
                }
            }
        }

        p {
            color: #fff;
            margin: 0;
        }
    }
}

.b-post-alt {
    position: relative;

    &__image {
        display: block;
        text-decoration: none;
        overflow: hidden;

        img {
            .transition(@transition);
        }

        &:hover {
            img {
                .scale(1.1);
            }
        }
    }

    &__cat {
        background: @brand-dark;
        text-transform: uppercase;
        font-family: @headings-font-family;
        font-weight: @headings-font-weight;
        color: #fff;
        position: absolute;
        left: 15px;
        top: 15px;
        padding: 2px 6px;
        font-size: 10px;
        text-decoration: none;
        .transition(@transition);

        &:hover {
            background: @brand-accent;
            color: #fff;
        }
    }

    &__body {
        h4 {

            a {
                text-decoration: none;
            }
        }

        &__author {
            .opacity(.5);
        }

        &__info {
            .clearfix();
            border-top: 1px solid @border-color;
            margin-top: 15px;
            padding-top: 15px;
        }
    }

    &__actions {
        float: right;

        a {
            display: inline-block;
            margin-left: 15px;
        }
    }

    &.-lg {
        .clearfix();

        & + & {
            margin-top: 50px;
        }

        h4 {
            font-size: 26px;
        }

        .b-post-alt__image {
            max-width: 300px;
            margin-right: 30px;
            float: left;
        }

        .b-post-alt__body {
            overflow: hidden;

            h4 {
                margin-top: 0;
            }
        }
    }
}

.sup-label {
    // background: #f7f7f7;
    padding: 2px;
    display: inline-block;
    border-radius: 2px;
    color: #555;
    font-size: 11px;

    &-warning {
        color: @brand-warning;
    }

    &-info {
        color: @brand-info;
    }
}

.b-post-alt2 {
    .clearfix();

    &__image {
        float: left;
        max-width: 120px;
        margin-right: 15px;
    }

    &__body {
        overflow: hidden;

        h4,
        h5 {
            margin: 0;
        }
    }

    & + & {
        margin-top: 30px;
    }

    &.-sm {

        .b-post-alt2__image {
            max-width: 80px;
        }
    }
}
