:root {
--rac-card-padding: 14px;
--rac-card-border: 1px solid #eee;
--rac-card-radius: 8px;
--rac-card-bg: #fff;
--rac-card-shadow: 0 2px 5px rgba(0,0,0,0.1);
--rac-card-gap: 15px;
--rac-card-min-width: 280px;
--rac-card-min-height: 100px;  
}
.random-article-container {
display: flex;
gap: var(--rac-card-gap);
overflow-x: auto;
padding-bottom: 10px;
scrollbar-width: thin;
scrollbar-color: #ddd transparent;
}
.random-article-card {
flex: 0 0 auto;
min-width: var(--rac-card-min-width);
min-height: var(--rac-card-min-height);
padding: var(--rac-card-padding);
border: var(--rac-card-border);
border-radius: var(--rac-card-radius);
background-color: var(--rac-card-bg);
box-shadow: var(--rac-card-shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.random-article-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.random-article-card a {
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
line-height: 1.4;
display: block;
word-break: break-word;
color: inherit;
} .random-article-container::-webkit-scrollbar {
height: 6px;
}
.random-article-container::-webkit-scrollbar-track {
background: transparent;
}
.random-article-container::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 3px;
}
@media (min-width: 768px) {
.random-article-container {
flex-wrap: wrap;
overflow-x: visible;
}
.random-article-card {
flex: 1 1 calc(33.333% - var(--rac-card-gap));
min-width: auto;
}
}