.avatar {
    margin: 0;
    text-align: center;
    img {
        border: 4px solid lighten($sidebar-bg,5%);
        max-width: 70%;
    }
    h3 {
        margin: 0;
        color: lighten($sidebar-text,10%);
    }
    h5 {
        color: darken($sidebar-text,10%);
    }
}

.blog-item {

    .blog-padding {
        padding: 0 $content-padding ($content-padding/2) $content-padding;
    }

    .blog-title {
        padding: 0 $content-padding 0 $content-padding;

        h1 {
            margin: 1rem 0 0;
        }

    }

    .blog-header {
        img {
            max-width: 100%;
            display: block;
        }
        position: relative;

        h1 {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0;
            padding: 1rem 3rem;
            background: rgba($black, 0.5);

            a {
                color: darken($white,15%);
                &:hover {
                    color: $white;
                }
            }
        }
    }

    .blog-details {
        margin: 1rem $content-padding 2rem;
        .tags {
            float: right;
        }
    }

    .blog-images {
        background: #eee;
        padding: 1rem $content-padding;
    }

}