@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

.two_col_blog_wrapper {
    background: #e5e5e5;
    padding: 6.9375rem 0 1.375rem
}

.blog_list--wrapper {
    margin-bottom: 1.25rem
}

.blog_list--details {
    position: relative;
    padding: 1.875rem 1.25rem;
    background: var(--white);
    box-shadow: 0 16px 158px rgba(0,0,0,.07)
}

    .blog_list--details .blog_date--wrapper {
        width: 120px;
        height: 70px;
        background: var(--light-green);
        border-radius: 5px;
        position: absolute;
        top: -1.5rem;
        left: 1.2rem
    }

.blog_date--wrapper .date_month {
    display: block;
    font-family: "Comic Neue", cursive;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 116.6%;
    text-align: center;
    color: var(--white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.blog_list--details .blog_title {
    font-family: "Comic Neue", cursive;
    font-style: normal;
    font-weight: 700;
    font-size: 19px;
    line-height: 133.1%;
    color: var(--black) ;
    margin-top:20px
}

.blog_author--comments {
    padding: 1.375rem 0 1.1875rem
}

.blog_author--comments {
    display: flex;
    align-items: center
}

.author_comments {
    padding-left: 10px
}

    .author_comments span {
        display: block
    }

    .author_comments .author_name {
        font-family: "Comic Neue", cursive;
        font-style: italic;
        font-weight: 400;
        font-size: 14px;
        line-height: 146.1%;
        color: #383838
    }

    .author_comments .comments {
        font-family: "Comic Neue", cursive;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 146.1%;
        color: #383838;
        position: relative
    }

.online_shop {
    display: flex;
    align-items: center
}

    .online_shop .online_text {
        font-family: "Comic Neue", cursive;
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 146.1%;
        color: var(--black);
        padding-left: 1rem
    }

.tag_links {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

    .tag_links img {
        margin-right: .125rem
    }

    .tag_links .tag_links--btn {
        display: block;
        font-family: "Comic Neue", cursive;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 146.1%;
        color: var(--black);
        border: .857143px solid var(--black);
        border-radius: 19.7143px;
        padding: .375rem .4375rem;
        margin: 0 .25rem;
        text-decoration: none;
        transition: all .5s ease-in-out
    }

        .tag_links .tag_links--btn:hover {
            background: var(--black);
            color: var(--white)
        }

.read_more--wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    width:100%;
}

    .read_more--wrapper .btn_regular {
        display: block;
        text-align: center;
        font-size: 12px;
        line-height: 146.1%;
        text-decoration: none;
        padding: 10px 15px
    }

.online_shop--wrapper {
    padding-top: 1.3125rem
}

.two_col_blog_wrapper .inner_row {
    margin-bottom: 20px
}

@media(min-width:420px) {
    .blog_author--comments, .blog_author--comments .author_comments {
        display: flex;
        align-items: center
    }

    .author_comments .comments {
        padding-left: 13px;
        margin-left: 13px
    }

        .author_comments .comments::before {
            position: absolute;
            content: '';
            width: 1px;
            height: 10px;
            background: #383838;
            top: 6px;
            left: 0
        }

    .tag_links .tag_links--btn {
        padding: .375rem 1.5625rem
    }

    .online_shop--wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .read_more--wrapper {
        margin-top: 0
    }
}

.blog_two--cols:nth-last-child(1) .blog_list--wrapper {
    margin-bottom: 0
}

@media(min-width:768px) {
    .blog_two--cols:nth-last-child(2) .blog_list--wrapper {
        margin-bottom: 0
    }

    .blog_date--wrapper .date_month {
        font-size: 16px
    }

    .blog_list--wrapper {
        margin-bottom: 1.875rem
    }

    .two_col_blog_wrapper {
        padding-bottom: 4.375rem
    }
}

@media(min-width:768px) and (max-width:991px) {
    .blog_list--details {
        padding: 2.5625rem .8rem 2.3rem;
        min-height:220px
    }

        .blog_list--details .blog_date--wrapper {
            top: -1.4rem;
            left: .8rem
        }

    .online_shop .online_text {
        padding-left: .5rem
    }

    .tag_links .tag_links--btn {
        padding-left: 1rem;
        padding-right: 1rem
    }
}

@media(min-width:992px) {
    .blog_list--details {
        padding: 2.5625rem 1.875rem;
        min-height: 200px
    }

        .blog_list--details .blog_date--wrapper {
            width: 68px;
            height: 69px;
            top: -2.2rem;
            left: 1.875rem
        }

    .read_more--wrapper {
        margin-top: 0;
        min-width: 169px
    }
}

@media(min-width:1680px) {
    .blog_list--details {
        padding: 2.5625rem 2.625rem;
        min-height:200px
    }

        .blog_list--details .blog_date--wrapper {
            left: 2.625rem
        }
}

@media(min-width:992px) and (max-width:1440px) {
    .blog_two_with_sidebar--cols .blog_list--details {
        padding: 2.5625rem .8rem 2.3rem
    }

    .blog_two_with_sidebar--cols .blog_date--wrapper {
        left: .8rem
    }

    .blog_two_with_sidebar--cols .online_text {
        padding-left: .5rem;
        font-size: 13px
    }
}

@media(min-width:1200px) {
    .blog_two_with_sidebar--cols .tag_links--btn {
        padding-left: 1.5625rem;
        padding-right: 1.5625rem
    }

    .blog_two_with_sidebar--cols .online_text {
        padding-left: 1rem;
        font-size: 14px
    }
}

@media(min-width:1680px) {
    .blog_two_with_sidebar--cols .blog_list--details {
        padding: 2.5625rem 1.5rem 2.125rem
    }

    .blog_two_with_sidebar--cols .blog_date--wrapper {
        left: 1.5rem
    }
}