:root {
    --header-bg-color: var(--color-beige);
}

body {
    color: var(--color-dark-brown);
    background-color: var(--color-beige); 
}

.news-list-wrapper {
    display: flex;
    flex-direction: column;
    gap:0.5rem;
    max-width: 1160px;
    margin: auto;
    margin-top: 2.5rem;

    @media (width >= 768px) {
        gap: 1.5rem;
        margin-top: 5rem;
    }
}

.news-card {
    display: flex;
    flex-direction: column;
    gap:0.5rem;
    padding: 0.75rem;
    color: var(--color-dark-brown);
    background-color: var(--color-beige);
    border-radius: 8px;

    &:hover {
        background-color: var(--color-white);
        opacity: inherit;
    }

    @media (width >= 768px) {
        padding: 1.25rem;
    }
}

.news-card-date {
    font-family: var(--font-family-en);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-brown);
}

.news-card-title {
display: -webkit-box;
overflow: hidden;
font-family: var(--font-family-ja);
font-size: var(--text-ja-16);
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}

.pagination{
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin: 30px 0 80px;

    @media (width >= 768px) {
        gap: 32px;
        margin: 60px 0 160px;
    }

    .page-numbers{
        display: inline-block;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        font-size: var(--text-ja-10);
        color: var(--color-dark-brown);
        letter-spacing: 0.06em;
        border: 1px solid var(--color-dark-brown);
        border-radius: 50%;

        @media (width >= 768px) {
            width: 40px;
            height: 40px;
            font-size: var(--text-ja-13);
        }
    }

    .dots{
        width: auto;
        border: none;
    }

    .current{
        color: var(--color-white);
        background:var(--color-dark-brown) ;
    }

    .next, .prev{
        width: 12px;
        height: 15px;
        font-size: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% auto;
        border: none;
    }

    .next{
        background-image: url("../img/topic-next.svg");
    }

    .prev{
        background-image: url("../img/topic-prev.svg");
    }
}