#music .content {
    padding-bottom: calc(var(--default-spacing) * 2);
}
/* Filters */
.filters {
    margin-bottom: calc(var(--default-spacing) *  2);
}
.filters ul {
    display: block;
}
@media only screen and (min-width: 768px) {
    
    .filters ul {
        display: flex;
    }
    .filters ul li {
            margin-right: 10px;
        }
    .filter.active {
        text-transform: uppercase;
        
    }
}
.filter.active a {
    font-family: var(--strong-font-family);
}


/* Tracks */
.tracks {
}
.track {
    margin-bottom: calc(var(--default-spacing) / 2);
}
.track > .wrapper {
    display: flex;
}
.track hr {
    width: 40px;
    border-top: 4px solid #fff;
    margin-left: 40px;
}
.track .play {
    width: 35px;
    flex-shrink: 0;
}
.track .track_name {
    flex-grow: 2;
    font-family: var(--strong-font-family);
}
.track .year {
    width: 15%;
    flex-shrink: 0;
    border-left: 1px solid #fff;
    box-sizing: border-box;
    padding-left: 10px;
}
.track .duration {
    width: 10%;
    flex-shrink: 0;
    border-left: 1px solid #fff;
    box-sizing: border-box;
    padding-left: 10px;
}
.track .type {
    width: 15%;
    flex-shrink: 0;
    border-left: 1px solid #fff;
    box-sizing: border-box;
    padding-left: 10px;
}
.track .description {
     width: 25%;
     flex-shrink: 0;
     border-left: 1px solid #fff;
     box-sizing: border-box;
     padding-left: 10px;
     display: none;
}
.track .score {
     width: 15%;
     flex-shrink: 0;
     border-left: 1px solid #fff;
     box-sizing: border-box;
     padding-left: 10px;
}
@media only screen and (min-width: 768px) {
    .track .description {
         display: block;
    }
    .track .year {
        width: 10%;
    }
    .track .duration {
        width: 10%;
    }
}

@media only screen and (min-width: 768px) {
    .track .year {
        width: 8%;
    }
    .track .duration {
        width: 5%;
    }
    .track .description {
         width: 35%;
    }
}