.audioplayer {
  max-width: 30rem;
  margin: 0 auto;
  padding: 0;
}

.audioplayer-card {
  display: flex;
  align-items: center;
  gap: 0;
}

.vinilimg {
  flex-shrink: 0;  /* запрещает сжиматься, если не хватает места */

  width: 5rem;
  margin: 0;
  padding: 0;
}

.audioplayer-card p {
  flex: 1; /* занимает всё оставшееся пространство */
  min-width: 0; /* предотвращает переполнение в некоторых случаях */

  text-indent: 0;
  color: rgb(202, 127, 74);
  margin: 0;
  padding: 0 0.2rem 0 0.5rem;
}


.vinilimgspin {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation-duration: 5s;
  animation-name: vinilrot;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes vinilrot {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


/* ---------- P C   &    T A B L E T S ---------- */
/* Unless you have a legitimate reason to restrict the style sheets based on the resolution */
/* and not the size of the viewport, then just use min-width/max-width */
/*  and avoid min-device-width/max-device-width */
@media only screen and (min-width: 480px) {}