.news-detail .news-popular-list {
    gap: 2px;
}

    .news-detail .news-popular-list article {
        position: relative;
        min-width: 0;
        padding: 6px 7px;
        margin-inline: -10px;
        border: 1px solid transparent;
        border-radius: 12px;
        transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    }

        .news-detail .news-popular-list article > div {
            min-width: 0;
        }

        .news-detail .news-popular-list article > a {
            position: relative;
            display: block;
            isolation: isolate;
            height: 84px;
            border-radius: 9px;
            background: #edf1f4;
        }

            .news-detail .news-popular-list article > a::after {
                content: "\2197";
                position: absolute;
                right: 6px;
                bottom: 6px;
                display: grid;
                place-items: center;
                width: 26px;
                height: 26px;
                border-radius: 50%;
                background: #fff;
                color: #10293b;
                box-shadow: 0 3px 12px #10293b30;
                font: 19px/1 Arial, sans-serif;
                opacity: 0;
                transform: translateY(8px);
                transition: opacity .25s ease, transform .3s ease;
                pointer-events: none;
            }

    .news-detail .news-popular-list img {
        display: block;
        transition: transform .55s cubic-bezier(.2, .65, .3, 1), filter .4s ease;
    }

    .news-detail .news-popular-list time {
        color: #697c88;
    }

    .news-detail .news-popular-list h3 a {
        overflow-wrap: anywhere;
        transition: color .25s ease;
        text-decoration-color: #c89b5470;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
    }

    .news-detail .news-popular-list article:focus-within {
        background-color: #fcf8f0;
        border-color: #e9d9bb;
        box-shadow: 0 8px 22px #10293b0d;
    }

        .news-detail .news-popular-list article:focus-within h3 a {
            color: #996b25;
            text-decoration-line: underline;
        }

    .news-detail .news-popular-list a:focus-visible {
        outline: 2px solid #996b25;
        outline-offset: 3px;
    }

@media (hover: hover) and (pointer: fine) {
    .news-detail .news-popular-list article:hover {
        background-color: #fcf8f0;
        border-color: #e9d9bb;
        box-shadow: 0 8px 22px #10293b0d;
        transform: translateY(-3px);
    }

        .news-detail .news-popular-list article:hover img {
            transform: scale(1.09);
            filter: saturate(1.12) brightness(1.04);
        }

        .news-detail .news-popular-list article:hover > a::after {
            opacity: 1;
            transform: translateY(0);
        }

        .news-detail .news-popular-list article:hover h3 a {
            color: #996b25;
            text-decoration-line: underline;
        }
}

@media (prefers-reduced-motion: reduce) {
    .news-detail .news-popular-list article,
    .news-detail .news-popular-list img,
    .news-detail .news-popular-list h3 a,
    .news-detail .news-popular-list article > a::after {
        transition: none;
        transform: none;
    }

        .news-detail .news-popular-list article:hover,
        .news-detail .news-popular-list article:hover img {
            transform: none;
        }
}