:root {
    --btn-wh: 40px
}

.grid-block .article-layout {
    padding: 0;
    margin-bottom: 24px;
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid
}

@media (max-width: 991px) {
    .grid-block .article-layout {
        margin-bottom: 20px
    }
}

#content .article-block.grid-block .article-layout .image {
    text-align: center;
    position: relative
}

#content .article-block.grid-block .article-layout .image:after {
    content: '';
    width: 100%;
    height: 80px;
    background: var(--fon333);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1
}

#content .article-block.grid-block .article-layout .caption {
    display: block;
    flex-direction: column
}

.article-layout .image a {
    display: block
}

.article-layout .image a:hover {
    filter: brightness(.8)
}

#content .article-block.grid-block .article-layout .image a {
    margin-left: auto;
    width: 100%
}

#content .article-block.grid-block .article-layout .image img {
    width: 100%;
    height: 100%;
    border-radius: 4px
}

.list-block .article-layout .image {
    float: left;
    margin-right: 30px
}

#content .article-block.grid-block .article-layout .h4,
#content .article-block.grid-block .article-layout .h4 a {
    margin: 8px 0 10px;
    font-size: 20px;
    text-align: unset;
    font-weight: 700;
    line-height: 1.35;
    line-height: 135%;
}

@media (max-width: 991px) {
    #content .article-block.grid-block .article-layout .h4,
    #content .article-block.grid-block .article-layout .h4 a {
        font-size: 17px
    }
}

#content .article-block.grid-block .list-block .article-layout .h4 {
    text-align: left;
    margin-top: 10px
}

#content .article-block.grid-block .article-layout .desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* font-size: 16.82px; */
    margin: 10px 0 0
}

#content .article-block.grid-block .article-layout .date-viewed {
    margin: 0;
    display: flex;
    justify-content: flex-start;
    gap: 30px
}

#content .article-block.grid-block .article-layout .date-viewed i {
    margin-right: 8px;
    display: flex;
}

@media (max-width:419px) {
    #content .article-block.grid-block .article-layout .date-viewed {
        gap: 0px;
    }
    #content .article-block.grid-block .article-layout .date-viewed i {
        margin-right: 3px;
    }
}

#content .article-block.grid-block .article-layout .button-group {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    overflow: auto
}

@media (min-width: 640px) {
    #content .article-block.grid-block .list-block .article-layout .button-group {
        border-left: 0 solid #ddd;
        max-width: 200px
    }
}

@media (max-width: 768px) {
    #content .article-block.grid-block .list-block .article-layout .button-group {
        border-left: none
    }
}

#content .article-block.grid-block .article-layout .button-group button+button {
    height: var(--btn-wh);
    width: var(--btn-wh);
    margin-left: 10px;
    border-left: 0 solid #ddd
}

#content .article-block.grid-block .article-layout .button-group button:hover {
    text-decoration: none
}

.article-layout .image {
    position: relative;
    border-radius: 4px
}

.article-layout .image img {
    border-radius: 4px;
    width: 100%;
    order: 1;
}

.blog-featured .article-layout .image img {
    border-radius: 4px 4px 0px 0px;
}

@media (max-width: 419px) {
    #content .article-block.grid-block .article-layout .button-group button {
        float: none
    }
}

.image_name {
    left: 0;
    width: 100%;
    z-index: 1;
    background: linear-gradient( 0deg, var(--fon1), var(--zagol));
    padding: 10px 12px;
    font-weight: bold;
    color: var(--btnfff);
    border-radius: 0 0 4px 4px;
    order: 2;
}

.image_name a {
    color: var(--text)
}