@media screen and (max-width: 1180px) {
  .header {
    height: auto;
  }

  .header__content {
    flex-direction: column;
    align-items: center;
  }

  .header__content .audio-block {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media screen and (max-width: 665px) {
  #progress {
    width: 200px;
    margin-right: 5px;
  }

  .play-button {
    width: 40px;
    height: 40px;
    margin-right: 5px;
  }

  #current-time,
  #duration {
    margin-right: 3px;
  }

  #volume {
    width: 50px;
  }
}

@media screen and (max-width: 500px) {
  .about__section__content img {
    width: 400px;
  }

  .header__image-block img {
    max-width: 350px;
  }

  #progress {
    width: 125px;
  }

  .play-button {
    width: 36px;
    height: 36px;
    margin-right: 5px;
  }

  #current-time,
  #duration {
    margin-right: 3px;
  }

  #volume {
    width: 40px;
    margin-top: 7px;
  }
}



@media screen and (max-width: 600px) {
  .about__section__content img {
    width: 450px;
  }

  .audio-container {
    padding: 0;
  }
}

@media screen and (max-width: 450px) {
  .about__section__content img {
    width: 350px;
  }

  .container {
    width: 80%;
  }
}

@media screen and (max-width: 400px) {
  #progress {
    width: 105px;
  }

  #current-time,
  #duration {
    font-size: 14px;
  }

  .muteBlock {
    margin-left: 5px;
    margin-top: 5px;
  }
}



@media screen and (max-width: 390px) {
  .header__image-block img {
    max-width: 300px;
  }
}

@media screen and (max-width: 375px) {
  .about__section__content img {
    width: 300px;
  }
}