.news-detail-aside {
    position: static;
}

.news-detail-aside-track {
    position: relative;
    min-width: 0;
    align-self: stretch;
}

@media (min-width: 992px) {
    .news-detail-aside-track .news-detail-aside {
        box-sizing: border-box;
        align-content: start;
        grid-auto-rows: max-content;
        max-height: calc(100vh - 48px);
        max-height: calc(100dvh - 48px);
    }
    .news-detail-aside.is-fixed {
        position: fixed;
        top: 101px;
        left: var(--news-aside-left);
        width: var(--news-aside-width);
        z-index: 20;
    }
    .news-detail-aside.is-at-end {
        position: absolute;
        top: auto;
        bottom: 0;
        width: 100%;
    }
}

.news-popular-list article {
    position: relative;
    border-radius: 9px;
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

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

.news-popular-list article>a {
    position: relative;
}

.news-popular-list article>a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .35) 50%, transparent 75%);
    transform: translateX(-120%);
    transition: transform .55s ease;
    pointer-events: none;
}

.news-popular-list img {
    transition: transform .4s ease;
}

.news-popular-list h3 a {
    transition: color .25s ease;
}

.news-popular-list article:focus-within {
    background: #edf7fa;
    box-shadow: 0 0 0 5px #edf7fa;
}

.news-popular-list a:focus-visible {
    outline: 2px solid var(--ne-teal);
    outline-offset: 2px;
}

.news-popular-list article:focus-within h3 a {
    color: var(--ne-teal);
}

@media (hover: hover) and (pointer: fine) {
    .news-popular-list article:hover {
        background: #edf7fa;
        box-shadow: 0 0 0 5px #edf7fa, 0 8px 18px rgba(16, 41, 59, .08);
        transform: translateY(-2px);
    }
    .news-popular-list article:hover img {
        transform: scale(1.08);
    }
    .news-popular-list article:hover>a::after {
        transform: translateX(120%);
    }
    .news-popular-list article:hover h3 a {
        color: var(--ne-teal);
    }
}

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