.page {
    background-color: var(--color--white);
}


.articles {
    margin-bottom: 64px;
}

.articles.template-blog .wrapper,
.articles.template-category .wrapper {
    grid-template-columns: 1fr 247px;
}


.articles.template-blog .articles-items li:first-child {
    grid-column-start: span 3;
}

.articles.template-blog .articles-items li:first-child .article {
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

.articles.template-blog .articles-items li:first-child .text {
    display: block;
    margin: auto 0;
}

.articles .wrapper {
    display: grid;
    grid-column-gap: 64px;
}


.articles-items ul {
    display: grid;
    grid-gap: 32px;
    grid-template-columns: repeat(3, 1fr);
}

.articles-items ul:not(:last-child) {
    margin-bottom: 48px;
}


.articles-search {
    align-items: center;
    display: flex;
    margin-bottom: 24px;
    position: relative;
}

.articles-search input {
    font-size: 14px;
    padding-left: 35px;
    padding-right: 11px;
}

.articles-search svg {
    color: var(--color--gray-normal);
    left: 11px;
    position: absolute;
}



@media (max-width: 1299px) {
    .articles.template-blog .wrapper,
    .articles.template-category .wrapper {
        grid-template-columns: 1fr 241px;
    }


    .articles.template-blog .articles-items li:first-child {
        grid-column-start: span 2;
    }

    .articles.template-blog .articles-items li:first-child .article {
        display: block;
    }

    .articles.template-blog .articles-items li:first-child .media {
        margin-bottom: 16px;
    }

    .articles .wrapper {
        grid-column-gap: 48px;
    }


    .articles-items ul {
        grid-gap: 32px 16px;
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 1024px) {
    .articles .wrapper {
        display: flex;
        flex-direction: column-reverse;
        row-gap: 32px;
    }


    .articles-items ul {
        grid-template-columns: 1fr;
    }

    .articles.template-blog .articles-items li:first-child {
        grid-column-start: auto;
    }
}