/* Basic CSS styling for the track info */
.track-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 1; /* Use rem for spacing based on root font size */
}

.album-art {
    flex: 0 0 28%; /* Use a percentage to maintain proportional size */
    padding-right: 1rem; /* Maintain spacing with a relative unit */
}

.album-art img {
    max-width: 90%; /* Allow image to scale within its container */
    max-height: 90%; /* Use vh to maintain a responsive height */
    border-radius: 0.6rem; /* Add rounded corners */
    outline: none; /* Remove the outline */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Drop shadow directly below */
}

.track-details {
    flex-grow: 1; /* Allow the details to grow */
}

.track-details ul {
    list-style-type: none; /* Remove default bullet points */
    margin: 0;
    padding: 0; /* Reset margins and paddings */
}

.track-details li {
    padding-left: 1.15rem; /* Responsive padding for list items */
    position: relative; /* Position relative for pseudo-element */
}

.track-details li::before {
    content: '💽'; /* Mini-disc emoji */
    position: absolute; /* Position the emoji */
    left: 0; /* Align to the start of the list item */
}

.track-details strong {
    font-weight: bold; /* Keep the strong tag bold */
}

.track-title {
    font-size: 1.5rem; /* Responsive font size for track title */
}

.track-subtext {
    color: gray; /* Keep the subtext in gray */
    font-size: 0.9rem; /* Responsive font size for subtext */
}