.blog {
    padding-bottom: 60px
}

.blog__list {
    grid-gap: 30px 20px;
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 50px;
    position: relative
}

.blog__item {
    position: relative;
    z-index: 5
}

.blog__pagination {
    margin-top: 54px
}

.blog-item {
    align-items: flex-start;
    display: flex;
    flex-direction: column
}

.blog-item__img,
.blog-item__img-link {
    display: block;
    font-size: 0;
    line-height: 0;
    width: 100%
}

.blog-item__img img {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%
}

.blog-item__name {
    color: #303030;
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3333333333;
    margin-top: 20px;
    text-decoration: none;
    transition: color .15s ease-in-out
}

.blog-item__name:hover {
    color: #01c102
}

.blog-item__date {
    color: #7f7f7f;
    font-size: .875rem;
    line-height: 1.2;
    margin-top: 8px
}

.blog-item__desc {
    -webkit-line-clamp: 3;
    color: #171717;
    margin-top: 8px
}

.blog-item__desc,
.blog-item__more {
    font-size: .875rem;
    line-height: 1.4285714286
}

.blog-item__more {
    color: #01c102;
    display: block;
    margin-top: 5px;
    text-decoration: underline
}

.blog-item__more:hover {
    text-decoration: none
}

@media only screen and (min-width:48em) {
    .blog__list {
        grid-template-columns: repeat(2, 1fr)
    }

    .blog__list:before {
        background: transparent url(../img/bg-dots.png) repeat 0 0;
        content: "";
        display: block;
        height: 166px;
        left: -63px;
        position: absolute;
        top: -39px;
        width: 275px;
        z-index: 1
    }

    body.no-js .blog__list:before,
    body.no-webp .blog__list:before {
        background-image: url(../img/bg-dots.png)
    }

    body.webp .blog__list:before {
        background-image: url(../img/bg-dots.webp)
    }
}

@media only screen and (min-width:62em) {
    .blog__list {
        grid-gap: 42px 30px
    }

    .blog__list:before {
        top: -39px
    }

    .blog-item__name {
        font-size: 1.125rem;
        margin-top: 30px
    }

    .blog-item__date {
        margin-top: 15px
    }

    .blog-item__desc {
        margin-top: 16px
    }

    .blog-item__more {
        margin-top: 10px
    }
}