.music-card{
  flex: 1 1 auto;
  background-color: #181818;
  border-radius: 0.6rem;
  margin-bottom: 16px;
  position: relative;
  max-height: 230px;
  white-space: nowrap;
}

.music-card-hover{
  background-color: #282828;
}

.music-img-box{
  position: relative;
}

.music-img{
  aspect-ratio: 1/1;
  border-radius: 0.5rem;
  width: 100%;
  height: auto;
  min-width: 70px;
  max-width: 140px;
}

.play-icon, .pause-icon {
  position: absolute;
  bottom:0.5rem;
  right: 0.5rem;
  cursor: pointer;
  display: none;
}

.music-card:hover .play-icon {
  display: inline-block;
}

.music-card:hover .pause-icon {
  display: none;
}

.stickers-card{
  position: relative;
  min-height: 600px;
}

.sticker-content{
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%,50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.artistWrap {
  width: 16rem;
  height: 26rem;
  border-radius: 1rem;
  background-position: center;
  background-size: cover;
  margin-bottom: 30px;
}

@media (max-width: 767px) {
  .artistWrap{
    width: 12rem;
    height: 19.5rem;
  }

  .stk1{
    width: 1.25rem !important;
    height: 1.25rem !important;
    top: 21.5% !important;
    left: 7% !important;
  }

  .stk2{
    width: 7rem !important;
    height: 7rem !important;
    top: 19% !important;
    left: -4% !important;
  }

  .stk3{
    width: 6rem !important;
    height: 6.58rem !important;
    top: 50% !important;
    left: -2% !important;
  }

  .stk4{
    width: 14rem !important;
    height: 2rem !important;
    top: 81.5% !important;
    left: -12% !important;
  }

  .stk5{
    width: 1.5rem !important;
    height: 3rem !important;
    top: 30% !important;
    left: 56% !important;
  }

  .stk6{
    width: 2rem !important;
    height: 2rem !important;
    top: 40.5% !important;
    left: 53% !important;
  }

  .stk7{
    width: 10.5rem !important;
    height: 14.6rem !important;
    top: 46% !important;
    left: 31% !important;
  }

  .stk8{
    width: 6rem !important;
    height: 6rem !important;
    top: 27% !important;
    left: 84% !important;
  }

  .stk9{
    width: 6rem !important;
    height: 9.17rem !important;
    top: 46.5% !important;
    left: 75% !important;
  }

  .stk10{
    width: 8rem !important;
    height: 8rem !important;
    top: 76% !important;
    left: 72.5% !important;
  }
}

.stk1 {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: -8.5%;
  left: -2%;
  opacity: 0;
  transform-origin: center center;
}

.stk1.show {
  opacity: 1 ;
  transform: translateX(0%) translateY(0%) rotate(-30deg);
  animation: stk1-shake3d .3s ease-in-out ;
}

@keyframes stk1-shake3d {
  0% { transform: translateX(80%) translateY(80%) rotate(-30deg); }
  75% { transform: translateX(-5%) translateY(-5%) rotate(-30deg); }
  100% { transform: translateX(0%) translateY(0%) rotate(-30deg); }
}

.stk2 {
  position: absolute;
  width: 11rem;
  height: 11rem;
  top: -12%;
  left: -17%;
  opacity: 0;
}

.stk2.show {
  opacity: 1 ;
  transform: translateX(0%) translateY(0%);
  animation: stk2-shake3d .3s ease-in-out ;
}

@keyframes stk2-shake3d {
  0% { transform: translateX(15%) translateY(15%) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  75% { transform: translateX(-5%) translateY(-5%) rotateX(-5deg) rotateY(-5deg) rotateZ(-5deg); }
  100% { transform: translateX(0%) translateY(0%) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
}

.stk3 {
  position: absolute;
  width: 8rem;
  height: 8.77rem;
  top: 24%;
  left: -12%;
  opacity: 0;
}

.stk3.show {
  opacity: 1 ;
  transform: translateX(0%) translateY(0%) rotate(90deg);
  animation: stk3-shake3d .3s ease-in-out ;
}

@keyframes stk3-shake3d {
  0% { transform: translateX(20%) translateY(-20%) rotate(90deg); }
  75% { transform: translateX(-5%) translateY(5%) rotate(90deg); }
  100% { transform: translateX(0%) translateY(0%) rotate(90deg); }
}

.stk4 {
  position: absolute;
  width: 21rem;
  height: 3rem;
  top: 56%;
  left: -28%;
  opacity: 0;
  z-index: 2;
}

.stk4.show {
  opacity: 1 ;
  transform: translateX(0%) translateY(0%);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}

.stk5 {
  position: absolute;
  width: 2rem;
  height: 4rem;
  top: 1.5%;
  left: 58%;
  opacity: 0;
}

.stk5.show {
  opacity: 1 ;
  transform: translateX(0%) translateY(0%);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}


.stk6 {
  position: absolute;
  width: 3rem;
  height: 3rem;
  top: 12.5%;
  left: 52.5%;
  opacity: 0;
}

.stk6.show {
  opacity: 1 ;
  transform: translateX(0%) translateY(0%);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}

.stk7 {
  position: absolute;
  width: 13.5rem;
  height: 18.75rem;
  top: 20%;
  left: 29%;
  opacity: 0;
}

.stk7.show {
  opacity: 1 ;
  transform: translateX(0) translateY(0);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}

.stk8 {
  position: absolute;
  width: 7.5rem;
  height: 7.5rem;
  top: -2%;
  left: 91%;
  opacity: 0;
}

.stk8.show {
  opacity: 1 ;
  transform: translateX(0%) translateY(0%);
  animation: stk8-shake3d .3s ease-in-out ;
}

@keyframes stk8-shake3d {
  0% { transform: translateX(-40%) translateY(10%) }
  75% { transform: translateX(5%) translateY(-5%) }
  100% { transform: translateX(0%) translateY(0%) }
}

.stk9 {
  position: absolute;
  width: 8rem;
  height: 12.2rem;
  top: 20%;
  left: 80%;
  opacity: 0;
}

.stk9.show {
  opacity: 1 ;
  transform: translateX(0) translateY(0) rotate(180deg);
  animation: stk9-shake3d .3s ease-in-out ;
}

@keyframes stk9-shake3d {
  0% { transform: translateX(-40%) translateY(10%) rotate(180deg); }
  75% { transform: translateX(5%) translateY(-5%) rotate(180deg); }
  100% { transform: translateX(0%) translateY(0%) rotate(180deg); }
}

.stk10 {
  position: absolute;
  width: 11rem;
  height: 11rem;
  top: 51.5%;
  left: 75.5%;
  opacity: 0;
}

.stk10.show {
  opacity: 1 ;
  transform: translateX(0) translateY(0) rotate(40deg);
  animation: stk10-shake3d .3s ease-in-out ;
}

@keyframes stk10-shake3d {
  0% { transform: translateX(-50%) translateY(-20%) rotate(40deg); }
  75% { transform: translateX(10%) translateY(10%) rotate(40deg); }
  100% { transform: translateX(0%) translateY(0%) rotate(40deg); }
}