/* --------- news-articles --------- */
.news-articles-wrap {
    display: grid;
    gap: 120px;
}

.news-articles {
    display: grid;
    grid-template-columns: max-content 1fr 95px;
}

.news-article {
    position: relative;
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 3;
    gap: 70px;
    padding-block: 62px;
    border-top: 1px solid var(--black-line);
    background: var(--bud-gradient) no-repeat left top / 20px 2px;
    transition: background .2s;

    .news-article__link {
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .news-article__meta {
        display: grid;
        align-self: flex-start;
        gap: 28px;
    }

    .news-article__body {
        display: grid;
        gap: 23px;
        color: #fff;
    }

    .news-article__title {
        font-size: 20px;
        line-height: 1.5;
    }

    .news-article__content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 14px;
        line-height: 2;
    }

    .sec--service__list__link__ico {
        display: block;
        align-self: center;
        width: 60px;
        height: 60px;
        border: 1px solid #fff;
        border-radius: 50%;
        background: url(/common/images/ico_arrow.png) no-repeat center/30px auto, url(/common/images/ico_arrow.png) no-repeat left -30px center/30px auto;
        transition: 0.15s;
    }

    &:hover {
        background: var(--bud-gradient) no-repeat left top/300px 2px;

        .sec--service__list__link__ico {
            background: url(/common/images/ico_arrow.png) no-repeat right -30px center/30px auto, url(/common/images/ico_arrow.png) no-repeat center/30px auto;
        }
    }
}

@media (width<768px) {
    /* --------- news-articles --------- */
    .news-article {
        grid-template-columns: unset;
        gap: 20px;
        padding-block: 25px 60px;

        .news-article__meta {
            grid-template-columns: repeat(2, auto);
            justify-content: flex-start;
            align-items: baseline;
            gap: 10px;
        }

        .news-article__title {
            font-size: 15px;
        }

        .news-article__content {
            -webkit-line-clamp: 4;
            margin-top: 10px;
            font-size: 13px;
        }

        .sec--service__list__link__ico {
            justify-self: flex-end;
        }
    }
}