.audio-uploader-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

[data-audio-player] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: url('../img/bg_progress.jpg') center / cover no-repeat;
    gap: 1rem;
    border-radius: .5rem;
    padding: 1rem;
    margin: 20px auto
}

[data-audio-player] .data-audio-player-progress {
    flex-grow: 2;
    flex: 1 1 auto;
    margin: 0 10px
}

[data-audio-player] [data-audio-player-progress-bar] {
    width: 100%;
    background-color: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer
}

[data-audio-player] [data-audio-player-progress-bar]::-webkit-progress-bar {
    background: #eeeeee
}

[data-audio-player] [data-audio-player-progress-bar]::-webkit-progress-value {
    background-color: red;
    background: red;
    border-radius: 2px;
    border-radius: 1rem
}

[data-audio-player] [data-audio-player-play-pause-button] {
    cursor: pointer
}

[data-audio-player] [data-audio-player-play-pause-button] svg,
[data-audio-player] [data-audio-player-play-pause-button] {
    width: 54px;
    height: 54px
}

[data-audio-player] [data-audio-player-time-display] {
    white-space: nowrap;
    color: white;
    font-weight: 700
}

[data-audio-player] [data-audio-player-speed-control] {
    background-color: #ffffff;
    padding: 4px;
    border-radius: 6px;
    font-size: 1rem
}

@media (max-width:768px) {
    [data-audio-player] [data-audio-player-speed-control] {
        gap: 0.5rem;
        padding: 0.5rem;
        align-items: start
    }

    [data-audio-player] [data-audio-player-play-pause-button] svg,
    [data-audio-player] [data-audio-player-play-pause-button] {
        width: 40px;
        height: 40px
    }
}

@media (max-width:425px) {
    [data-audio-player] {
        padding: .5rem;
        gap: .5rem
    }
}