* {
    scrollbar-width: thin;
    scrollbar-color: rgb(207, 105, 9) rgba(0, 0, 0, 0.05);
}

.dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.orange ::-webkit-scrollbar-thumb {
    background: rgba(255, 213, 170, 0.4);
}

.orange ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 213, 170, 0.6);
}



.dark * {
    scrollbar-color: rgb(187, 94, 8) rgba(255, 255, 255, 0.05);
}



.composer-grid-container .flex {
    scrollbar-width: thin;
    scrollbar-color: inherit;
    padding-bottom: 8px;
}

.composer-grid-container .flex::-webkit-scrollbar {
    height: 8px;
}

.composer-grid-container .flex::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    margin: 0 20px;
    border-radius: 4px;
}

.composer-grid-container .flex::-webkit-scrollbar-thumb {
    border-radius: 4px;
}

.composer-grid-container {
    padding: 20px;
}

.section-title {
    font-size: 1.5rem;
    margin: 2rem 0 1rem 0;
}

.composer-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}



.composer-info {
    padding: 0.8rem;
}



.composer-name {
    font-size: 1.1rem;
    margin: 0 0 0.3rem 0;
}



.composer-period {
    color: inherit;
    opacity: 0.8;
    margin: 0 0 0.8rem 0;
    font-size: 0.9rem;
}

.show-more-link {
    font-size: 1rem;
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.5rem 0;
}