/* eslint-disable css/no-invalid-properties */
/* Normalize Images to behave to css flex rules */
.track_images_card>img {
  display: block;
}

.track_images_card {
  display: grid;
  transform: translate(-4%, -31%);
  padding-right: -2em;
  width: 200px;
}

.track_images_card>img {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
}

.cover_card {
  width: 120px;
  z-index: 2;
}

.vinyl_card {
  width: 160px;
  border-radius: 50%;
  border: inset 3px goldenrod;
  border-radius: 50%;
}

.canorus_ring_card {
  width: 160px;
  height: 160px;
  border: inset 3px rgb(255, 255, 255);
  border-radius: 50%;
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  position: relative;
}

.canorus_ring_card+.cover_card {
  border: inset 1px rgb(255, 255, 255);
  border-radius: 50%;
}

.canorus_ring_card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, transparent 28%, rgba(255, 255, 255, 0.85) 40%, transparent 64%), conic-gradient(#8cf0ff, #caa8ff, #ffb3e6, #fff1a8, #baffff, #8cf0ff);
  filter: blur(0.3px);
}

.canorus_ring_card::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(90, 140, 255, 0.8) 0px, rgba(90, 140, 255, 0.8) 1px, transparent 2px, transparent 6px);
  filter: blur(2px);
  opacity: 0.6;
}

@media (width <=980px) {
  .vinyl_card {
    width: 130px;
  }
  .canorus_ring_card {
    width: 130px;
    height: 130px;
  }

  .cover_card {
    width: 95px;
  }

  .track_images_card {
    transform: translate(-12%, -31%);
    width: 100px;
  }
}

@media (800px < width <=850px) {
  .vinyl_card {
    width: 100px;
    border: inset 2px goldenrod;
  }
  .canorus_ring_card {
    width: 100px;
    height: 100px;
    border: inset 2px white;
  }

  .cover_card {
    width: 70px;
  }

  .track_images_card {
    transform: translate(-8%, -16%);
  }
}

@media (width <=450px) {
  .vinyl_card {
    width: 100px;
  }
  .canorus_ring_card {
    width: 100px;
    height: 100px;
  }

  .cover_card {
    width: 70px;
  }

  .track_images_card {
    transform: translate(-10%, -20%);
  }
}

@media (width <=390px) {
  .vinyl_card {
    width: 70px;
    border: inset 1px goldenrod;
  }
  .canorus_ring_card {
    width: 70px;
    height: 70px;
  }

  .cover_card {
    width: 50px;
  }

  .track_images_card {
    transform: translate(-3%, -9%);
  }
}

.chart_card_content>.grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}