:root {
    --tracklist-bg-odd: #272727;
    --tracklist-bg-even: #2f2f2f; /* Changed to requested color */
    --tracklist-border-color: #000; /* Changed to black */
    --tracklist-padding: 10px;
    --tracklist-gap: 5px;
    --tracklist-number-width: 8%; /* Percentage-based widths */
    --tracklist-duration-width: 10%;
    --tracklist-title-min-width: 40%; /* Minimum width for track title */
    --tracklist-artist-min-width: 20%;
    --font-size-desktop: 18px;
    --font-size-tablet: 18px;
    --font-size-mobile: 18px;
}

/* Container for the entire track list */
.tracklist-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 20px 0;
    padding: 0;
    list-style-type: none;
}

/* Each track item (row) */
.tracklist-item {
    display: flex;
    justify-content: space-between;
    padding: var(--tracklist-padding);
    border-bottom: 1px solid var(--tracklist-border-color); /* Black border */
    flex-wrap: wrap;
    font-size: var(--font-size-desktop); /* Responsive typography */
}

/* Styling for individual track details */
.tracklist-number,
.tracklist-title,
.tracklist-artist,
.tracklist-duration {
    padding: var(--tracklist-gap);
    text-align: left;
}

/* Odd and even row styling */
.tracklist-item:nth-child(odd) {
    background-color: var(--tracklist-bg-odd);
}

.tracklist-item:nth-child(even) {
    background-color: var(--tracklist-bg-even); /* Changed to darker color */
}

/* Specific styling for track information */
.tracklist-number {
    text-align: left;
    flex: 0 0 var(--tracklist-number-width); /* Adjust width */
    min-width: 40px; /* Ensure it doesn't get too narrow */
}

.tracklist-title {
    flex: 2 1 var(--tracklist-title-min-width); /* Dynamic and minimum width */
}

.tracklist-artist {
    flex: 1 1 var(--tracklist-artist-min-width); /* Dynamic and minimum width */
}

.tracklist-duration {
    text-align: right;
    flex: 0 0 var(--tracklist-duration-width); /* Percentage-based width */
    min-width: 60px; /* Ensure it doesn't get too narrow */
}

/* Tablet view (641px to 1024px): Tweak sizes to ensure better fit */
@media (max-width: 1024px) and (min-width: 641px) {
    .tracklist-item {
        font-size: var(--font-size-tablet); /* Slightly smaller font */
    }

    .tracklist-title,
    .tracklist-artist {
        flex: 1 1 30%; /* Compact width on tablets */
    }

    .tracklist-number, 
    .tracklist-duration {
        flex: 0 0 12%; /* Adjust width to avoid cramping */
    }
}

/* Mobile view (<=640px): Stack items vertically, increase text size and spacing */
@media (max-width: 640px) {
    .tracklist-item {
        flex-direction: column; /* Stack items vertically */
        font-size: var(--font-size-mobile); /* Larger font size for readability */
        padding: 15px; /* Increase padding for breathing room */
    }

    .tracklist-number {
        font-size: 22px;
        font-weight: 600;

    }

    .tracklist-number, 
    .tracklist-title, 
    .tracklist-artist, 
    .tracklist-duration {
        flex: 1 1 100%; /* Full width for each item */
        padding: 0;
    }

    .tracklist-title, 
    .tracklist-artist, 
    .tracklist-duration {
        margin-bottom: 0px; /* Add more vertical spacing */
    }

    .tracklist-duration {
        text-align: left; /* Align duration to the left for consistency */
    }
}