#articles-rail{display:flex;gap:0.75rem;list-style:none;margin:0;-webkit-overflow-scrolling:touch;overflow-x:auto;overflow-y:hidden;padding:0.5rem 0 1rem;scroll-snap-type:x mandatory;scrollbar-width:thin}
#articles-rail::-webkit-scrollbar{height:6px}
#articles-rail::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:3px}
#articles-rail li{flex:0 0 auto;scroll-snap-align:start}
.article-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);display:flex;flex-direction:column;height:100%;overflow:hidden;transition:transform 0.18s ease, box-shadow 0.18s ease;width:16rem}
.article-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.article-card__image{aspect-ratio:16 / 10;background:var(--color-surface-alt);overflow:hidden;position:relative}
.article-card__image img{display:block;height:100%;object-fit:cover;width:100%}
.article-card__info{display:flex;flex:1;flex-direction:column;gap:0.375rem;padding:0.75rem 1rem 1rem}
.article-card__name{-webkit-box-orient:vertical;display:-webkit-box;font-size:1rem;font-weight:700;-webkit-line-clamp:2;line-height:1.3;overflow:hidden;transition:color 0.15s}
.article-card:hover .article-card__name{color:var(--color-link)}
.article-card__cta{color:var(--color-link);font-size:0.8125rem;font-weight:500;margin-top:auto;padding-top:0.375rem}
@media (min-width: 768px){
.article-card{width:18rem}
}