.shop-card {
  background-color : var(--light-grey);
  width : 20vw;
  height : 50vh;
  border-radius : 30px;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  position : relative;
  margin : 50px;
}

.shop-card > .shop-img {
  height : 60%;
  width : 90%;
  position : relative;
  top : -10%;
}

.shop-img > img {
  width : 100%;
  height : 100%;
  object-fit : contain;
  object-position : center;
}

.shop-card > .item-desc {
  height : 50%;
  width : 60%;
  position : relative;
  top : -10%;
  display : flex;
  flex-direction : column;
  align-items : flex-start;
  justify-content : space-around;
}

.shop-card > .item-desc > h4 {
  color : var(--black);
  width : 100%;
  text-align : center;
}

.price {
  color : var(--dark-blue);
  font-weight : 900;
}


.color-container {
  margin : 0;
  display : flex;
  align-items : center;
  justify-content : flex-start;
}
.color {
  height : 18px;
  width : 18px;
  margin : 5px;
  border-radius : 50px;
  padding : 0;
  border : 0;
}

.add-to-cart {
  margin : 0;
  padding : 0;
  height : 50px;
  width : 50px;
  border-radius : 50px;
  position : absolute;
  right : 0;
  bottom : 15px;
  font-size : 20px;
}

.add-to-cart:before {
  animation: opacityFallbackOut .5s step-end forwards;
  backface-visibility: hidden;
  background-color: var(--light-blue);
  clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateZ(0);
  transition: clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1), -webkit-clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1);
  width: 100%;
  border-radius : 50px;
}

.color:before {
  animation: opacityFallbackOut .5s step-end forwards;
  backface-visibility: hidden;
  background-color: rgb(0,0,0,0);
  clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateZ(0);
  transition: clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1), -webkit-clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1);
  width: 100%;
  border-radius : 50px;
}

.color:hover {
  border : 0;
}

button span {
  z-index: 1;
  position: relative;
  top : -2px;
}

#shop > h3 {
  position : absolute;
  top : 35%;
  color : var(--white);
  font-size : 60px;
  transform : scale(2.5) rotate(3deg);
  font-weight : 900;
  background-color : var(--black);
  width : 100%;
  text-align : center;
  padding-bottom : 10px;
}


@media screen and (max-width: 980px) {

  .shop-card {
    width : 80vw;
    height : 50vh;
  }

  #shop > h3 {
    position : absolute;
    top : 50%;
    color : var(--white);
    font-size : 20px;
    transform : scale(2.5) rotate(3deg);
    font-weight : 900;
    background-color : var(--black);
    width : 100%;
    text-align : center;
    padding-bottom : 5px;
  }

}