.index-ranking-table{
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
	gap: 16px;
}

.index-ranking-table .rank .name img {
    height: 60px;
    width: 92px;
    object-fit: cover;
    object-position: center;
    border-radius: 3px;
}

.index-ranking-table .rank .meta {
    font-size: 14px;
    color: var(--muted);
    text-align: left;
    width: 80%;
}

.index-ranking-table .rank .meta .stars{
	font-size: 15px;
}

.carousel-container {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-track {
display: flex;
transition: transform 0.4s ease-in-out;
gap: 16px;
}
/* Force 3 visible items layout by setting item flex basis */
.carousel-track > * {
min-width: calc((100% - 32px) / 3);
flex: 0 0 calc((100% - 32px) / 3);
}
@media (max-width: 1024px) {
.carousel-track > * {
  min-width: calc((100% - 16px) / 2);
  flex: 0 0 calc((100% - 16px) / 2);
}
}
@media (max-width: 600px) {
.carousel-track > * {
  min-width: 100%;
  flex: 0 0 100%;
}
}
/* Carousel navigation buttons inside header rank-head */
.carousel-btns {
display: flex;
gap: 8px;
align-items: center;
}
.carousel-btn {
background: var(--panel);
border: 1px solid var(--line);
color: var(--text);
width: 32px;
height: 32px;
border-radius: 6px;
display: grid;
place-items: center;
cursor: pointer;
font-size: 14px;
transition: background 0.2s, border-color 0.2s;
}
.carousel-btn:hover {
border-color: #3b4d6b;
background: var(--panel-2);
}
.carousel-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}


@media (max-width: 768px) {
  .rank-head.index-rank{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-direction: column;
    
  }
}