/**
 * Music.
 */

#music {
    display: block;
    background-color: var(--main-theme-dark);
}

#music .music__title {
    margin: 0 14%;
}

.music-item-wrapper {
    background-color: var(--main-theme-light);
}

.music-item-wrapper.featured {
    background-color: var(--main-theme-dark);;
}

/**
 * Album grid.
 */
#music .albums {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    margin: 0 14%;
}

.album {
    display: grid;
    grid-template-columns: 3fr 5fr;
}

.album .album__cover img {
    width: 90%;
    padding: 40px;
}

.album__info {
    padding: 20px;
}

.album__info .album__title {
    font-family: var(--text-font);
    font-size: 1.2em;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.album__tracklist {
    font-family: var(--display-font);
    font-size: 1.1em;
    margin-left: 30px;
}

.tracks .track {
    margin-bottom: 18px;
}

.album__credits {
    font-family: var(--text-font);
    font-size: 0.8em;
    font-style: italic;
    margin-top: 35px;
}

@media only screen and (max-width: 600px) {
    #music .albums {
        grid-template-columns: 1fr;
    }

    .album {
        grid-template-columns: 1fr;
    }

    .album .album__cover img {
        padding: 15px;
    }
}

/**
 * Previous album mods.
 */

.albums .album {
    display: block;
    text-align: left;
}

.albums .album {
    display: block;
}

.albums .album__info .album__title {
    margin-top: 0;
    margin-bottom: 35px;
}

.albums .album .album__cover img {
    width: 50%;
    padding: 40px;
}

@media only screen and (max-width: 600px) {
    .albums .album .album__cover img {
        padding: 15px;
    }
}

/**
 * Feature album mods.
 */
#music .featured-album {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 14%;
}

.featured-album .album__tracklist {
    font-family: var(--display-font);
    font-size: 1.1em;
    margin-left: 30px;
}

.featured-album .tracks .track {
    margin-bottom: 18px;
}

.featured-album .album__info .album__title {
    font-family: var(--text-font);
    font-size: 1.2em;
    text-transform: uppercase;
    margin-bottom: 20px;
    margin-top: 20px;
}

/**
 * Track player.
 */

.track__player {
    display: inline-block;
    padding-left: 20px;
    vertical-align: middle;
}

.track__player audio {
    display: none;
    /*height: 20px;
    float: right;
    background-color: white;
    border-radius: 4px;*/
}

.media-player {
    display: inline-block;
}

.media-player .play-pause-button {
    height: 24px;
    width: 24px;
    background-image: url("/img/icons/play.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    border-radius: 10px;
}

.media-player .play-pause-button.playing {
    background-image: url("/img/icons/pause.png");
}

.media-player .play-pause-button:hover {
    background-color: var(--main-theme-dark);
}