.audio-player {
    border-radius: 5px;
    background-color: #E6E6E6;
    display: grid;
    color: #5C5C5C;
    min-height: min-content;
    width: calc(100% - 2vw - .8em);
}

/* audio css */
audio {
    background-color: #E6E6E6;
    width: 100%;
}
audio .background-tint .tint{
    background-color: #E6E6E6;
}
/* */
progress {
    background-color: #FFF;
    border-radius: 2px;
    width: 100%;
    height: 100%;
}
progress::-webkit-progress-bar {
    background-color: #FFF;
}
progress::-webkit-progress-value {
    background-color: #FF6363;
}
progress::-moz-progress-bar {
  background-color: #FF6363;
}
.hide {
    display: none;
}
.btn-play, .btn-pause {
    height: auto;
}
.btn-play img, .btn-pause img {
    width: .8em;
}
.audio-duration,
.audio-current-time {
    align-items: center;
    display: flex;
    font-size: .8em;
    justify-content: center;
}
@media screen and (max-width: 767px){

    .audio-player {
        font-size: 12px;
        grid-column-gap: .5em;
        grid-template-columns: 4em 1em 3em auto 3em;
        grid-template-rows: 1.5em;
        padding: .5em .8em;
        margin: 1em 0;
    }

    .audio-name{
        grid-column: 1;
    }
    .audio-btn-group {
        grid-column: 2;
    }
    .audio-current-time {
        grid-column: 3;
    }
    .audio-progress {
        grid-column: 4;
    }
    .audio-duration {
        grid-column: 5;
    }
}

@media screen and (min-width: 767px){
    .audio-player {
        font-size: 28px;
        grid-column-gap: .5em;
        grid-template-columns: 4em 1em 3em auto 3em;
        grid-template-rows: 1.5em;
        padding: .5em .8em;
        margin: 1em 0;
    }

    .audio-name{
        grid-column: 1;
    }
    .audio-btn-group {
        grid-column: 2;
    }
    .audio-current-time {
        grid-column: 3;
    }
    .audio-progress {
        grid-column: 4;
    }
    .audio-duration {
        grid-column: 5;
    }
}