#boxes * {
  border: 1px solid transparent;
}

#boxes {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-areas:
    "A B"
    "A C";
  gap: 32px;
  place-content: center;
  height: 100vh;
}

#player01 {
  grid-area: A;
  padding: 50px 38px;
}

#player01 .wrapper {
  width: 190px;
}

#player01 img {
  width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: 10px;
}

#player01 .info {
  padding-top: 28px;
}

#modal-player {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  grid-area: B;
  height: fit-content;
  max-width: 28rem;
  width: 100%;
  z-index: 1000;
  left: 15px;
  top: 15px;
}

#modal-player .controls {
  display: flex;
  justify-content: space-around;
}

#player03 {
  grid-area: C;
}

#player03 .controls {
  display: flex;
  justify-content: space-around;
  cursor: pointer;
}

.player {
  background-image: var(--bg-linear);
  padding: 28px;
  border-radius: 20px;
}

.player img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
}

.info {
  width: 100%;
  color: var(--color);
}

.info p {
  opacity: 0.68;
  font-size: 19px;
}

.info-wrapper {
  display: flex;
  align-items: center;
  gap: 30px;
}

.player h1 {
  font-size: 27px;
  color: var(--color);
  padding-bottom: 7px;
}

.controls {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  color: var(--color);
}

.track {
  padding-top: 28px;
  position: relative;
}

.track::before {
  content: "";
  height: 6px;
  width: 100%;
  display: block;
  background: #d9d9d9;
  opacity: 0.3;
  border-radius: 10px;
  position: absolute;
}

.track::after {
  content: "";
  height: 6px;
  width: 85%;
  display: block;
  background: #d9d9d9;
  border-radius: 10px;
}

.time {
  opacity: 0.7;
  font-size: 14px;
  color: gainsboro;
  display: flex;
  justify-content: space-between;
  padding-top: 9.6px;
}

@media (max-width: 670px) {
  #boxes {
    display: flex;
    flex-direction: column;

    max-width: 270px;
    margin: auto;

    height: auto;
    padding-block: 60px;
  }

  #modal-player {
    max-width: 19rem;
  }
}

.track-time input[type="range"] {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  cursor: pointer;
}

.flexRight {
  display: flex;
  align-items: end;
  justify-content: end;
}

.flexRight i {
  cursor: pointer;
  font-weight: 600;
}

.flexRight i:hover {
  color: #f20015;
  font-size: 15px1;
}

.time i {
  color: var(--color);
}

.prev,
.next,
.play {
  cursor: pointer;
  font-size: 30px;
  transition: transform 0.3s ease;
}

.prev:hover,
.next:hover,
.play:hover {
  transform: scale(1.2);
}

@media (max-width: 480px) {

  #modal-player {
    max-width: 19rem;
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
  }

  .player img {
    width: 100%;
    height: 50%;
  }

  .info-wrapper {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .prev, .next, .play {
    font-size: 24px; /* Reduce el tamaño de los íconos en móviles */
  }
}