:root {
    --news-red: #e50020;
    --news-ink: #171717;
    --news-paper: #f7f5f0;
    --news-line: #d7d3ca;
}

body {
    color: var(--news-ink);
    background: var(--news-paper);
}

.header {
    background: #fff;
}

.news-archive {
    min-height: 55vh;
}

.news-archive__header {
    padding: 92px 6% 72px;
    color: #fff;
    background: var(--news-ink);
    text-align: center;
}

.news-archive__header p {
    margin-bottom: 10px;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: clamp(34px, 4vw, 54px);
    letter-spacing: .08em;
}

.news-archive__header h1 {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .18em;
}

.news-archive__content {
    width: min(88%, 1000px);
    margin: 0 auto;
    padding: 90px 0 120px;
}

.news-archive__list {
    border-top: 1px solid var(--news-line);
}

.news-card {
    border-bottom: 1px solid var(--news-line);
}

.news-card > a {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 36px;
    padding: 34px 8px;
    color: inherit;
    text-decoration: none;
    transition: background-color .25s;
}

.news-card > a:hover {
    background-color: rgba(23, 23, 23, .04);
}

.news-card__body h2 {
    transition: color .25s;
}

.news-card > a:hover h2 {
    color: var(--news-red);
}

.news-card:not(:has(.news-card__image)) > a {
    grid-template-columns: 1fr;
}

.news-card__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e9e6df;
}

.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card__body time {
    display: block;
    margin-bottom: 13px;
    color: #77736b;
    font-size: 13px;
    letter-spacing: .08em;
}

.news-card__body h2 {
    margin-bottom: 15px;
    font-size: 23px;
    line-height: 1.55;
    letter-spacing: .04em;
}

.news-card__body p {
    color: #55524c;
    font-size: 14px;
    line-height: 1.9;
}

.news-archive__empty {
    padding: 65px 0;
    border-top: 1px solid var(--news-line);
    border-bottom: 1px solid var(--news-line);
    color: #66625c;
    text-align: center;
}

.news-pagination {
    margin-top: 64px;
}

.news-pagination .page-numbers {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.news-pagination a,
.news-pagination span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--news-ink);
    border: 1px solid var(--news-line);
    text-decoration: none;
    transition: color .2s, border-color .2s, background-color .2s;
}

.news-pagination a:hover {
    color: #fff;
    border-color: var(--news-ink);
    background: var(--news-ink);
}

.news-pagination .current {
    color: #fff;
    border-color: var(--news-red);
    background: var(--news-red);
}

@media screen and (max-width: 750px) {
    .news-archive__header {
        padding: 65px 6% 50px;
    }

    .news-archive__content {
        width: 90%;
        padding: 60px 0 82px;
    }

    .news-card > a {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 28px 0;
    }

    .news-card__body h2 {
        font-size: 19px;
    }
}