.song-lyrics {
    padding: 0.75rem;
    margin: 2rem auto;
    border-radius: var(--radius);
    background: var(--foreground);
    color: var(--text);
}

.song-lyric {
    margin: 0.33rem;
}

.header {
    display: grid;
    grid-template-columns: 12em auto;
    grid-template-rows: 3em 3em 6em;
    gap: 0 0.75em;
    grid-template-areas:
    "cover song"
    "cover song"
    "cover stats";
}

@media only screen and (max-width: 512px) { 
    .header {
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas:
        "cover"
        "song"
        "stats";
    }
}

.header-cover {
    grid-area: cover;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
}

.song-info {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: auto;
    grid-template-rows: auto;
    gap: 0.25em 0;
    grid-template-areas:
    "title"
    "artist"
    "album";
    grid-area: song;
    margin-top: 1em;
}

.title {
    grid-area: title;
    font-weight: 900;
    font-size: min(6vw, 32px);
    margin: 0;
}

@media only screen and (min-width: 513px) and (max-width: 768px) { 
    .title {
        font-size: min(4vw, 32px);
    }
}

.artist-name {
    color: var(--text);
    grid-area: artist;
    font-weight: 500;
    font-size: 18px;
    margin: 0;
}

.album-name {
    color: var(--text);
    grid-area: album;
    font-weight: 500;
    font-size: 18px;
    margin: 0;
}

.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0 1.5em;
    grid-template-areas:
    "release-date views";
    grid-area: stats;
    margin-top: auto;
}

.stats-release-date {
    grid-area: release-date;
    font-size: 14px;
}

.stats-views {
    grid-area: views;
    font-size: 14px;
    text-align: right;
}