// Blog layout.
.blog, .single, .archive, .search {
    .page-content {
        padding: 30px 0;
        .container {
            display: grid;
            grid: auto / auto 350px;
            grid-gap: 0 30px;
        }
        .page-title {
            grid-column: 1 / span 2;
        }
    }
}

// Post meta info
.post-meta {
    margin-bottom: 10px;
    .date {
        display: block;
    }   
    .cats a {
        color: inherit;
        text-decoration: none;
    }
    .tags a {
        color: inherit;
        opacity: 0.6;
        text-decoration: none;
        font-style: italic;
        transition: opacity 0.3s ease-in-out;
        &:hover {
            opacity: 1;
            transition: opacity 0.3s ease-in-out;
        }
    }
}

// Preview post object
.post-preview {
    border: solid 1px;
    .featured-img {
        @extend %img-preview;
        margin-bottom: 0px;
    }
    .content {
        padding: 0 15px 15px;
        h1 {
            font-size: 24px;
            font-family: inherit;
        }
        .post-meta {
            margin: 15px 0 0;
        }
        .btn {
            align-self: baseline;
            @extend %btn;
            
        }
    }
}

// Blog single
.post-wrap {
    display: grid;
    grid: auto / auto-flow 1fr;
    grid-gap: 15px 15px;  
    .post-nav-wrap {
        display: flex;
        margin-top: 15px;
        .back-btn {
            @extend %btn;
        }
        .navigation {
            .nav-links {
                display: flex;
                a {
                    @extend %btn;
                    margin-left: 3px;
                }
            }
        }
    }
}

// featured image size
.wp-post-image {
    width: 100%;
    height: auto;
}

// Comments
.comment-respond {
    border-top: solid 1px;
    padding-top: 5px;
    .comment-reply-title {
        font-size: 18px;
    }
    .comment-form-comment {
        label {
            display: none;
        }
        #comment {
            width: 100%;
        }
    }
    .submit {
        @extend %btn;
    }
}

// Blog loop layout
.posts-loop {

    // Classic
    &.blog-classic {
        display: block;
    }

    // Grid
    &.blog-grid {
        @include autoGrid(auto-fill, 350px, 1fr, 15px, 15px);
    }

}