@-webkit-keyframes arrow {
  0% {
    translate: 0% 0%;
    opacity: 1;
  }
  50% {
    translate: 100% 0%;
    opacity: 0;
  }
  50.1% {
    translate: -100% 0%;
    opacity: 0;
  }
  100% {
    translate: 0% 0%;
    opacity: 1;
  }
}
@keyframes arrow {
  0% {
    translate: 0% 0%;
    opacity: 1;
  }
  50% {
    translate: 100% 0%;
    opacity: 0;
  }
  50.1% {
    translate: -100% 0%;
    opacity: 0;
  }
  100% {
    translate: 0% 0%;
    opacity: 1;
  }
}
@-webkit-keyframes arrow-under {
  0% {
    translate: 0% 0%;
    opacity: 1;
  }
  50% {
    translate: 0% 100%;
    opacity: 0;
  }
  50.1% {
    translate: 0% -100%;
    opacity: 0;
  }
  100% {
    translate: 0% 0%;
    opacity: 1;
  }
}
@keyframes arrow-under {
  0% {
    translate: 0% 0%;
    opacity: 1;
  }
  50% {
    translate: 0% 100%;
    opacity: 0;
  }
  50.1% {
    translate: 0% -100%;
    opacity: 0;
  }
  100% {
    translate: 0% 0%;
    opacity: 1;
  }
}
@-webkit-keyframes arrow-back {
  0% {
    translate: 0% 0%;
    opacity: 1;
  }
  50% {
    translate: -100% 0%;
    opacity: 0;
  }
  50.1% {
    translate: 100% 0%;
    opacity: 0;
  }
  100% {
    translate: 0% 0%;
    opacity: 1;
  }
}
@keyframes arrow-back {
  0% {
    translate: 0% 0%;
    opacity: 1;
  }
  50% {
    translate: -100% 0%;
    opacity: 0;
  }
  50.1% {
    translate: 100% 0%;
    opacity: 0;
  }
  100% {
    translate: 0% 0%;
    opacity: 1;
  }
}
.product--lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 37px 40px;
}
@media (max-width: 767px) {
  .product--lists {
    gap: 30px;
  }
}
.product--wrap {
  position: relative;
  width: calc(33.3% - 27px);
  padding: 20px 20px 60px;
}
@media (max-width: 1199px) {
  .product--wrap {
    width: calc(50.3% - 27px);
  }
}
@media (max-width: 767px) {
  .product--wrap {
    width: calc(50% - 15px);
  }
}
@media (max-width: 575px) {
  .product--wrap {
    width: 100%;
  }
}
.product--wrap:hover .btn--tiny::after {
  -webkit-animation: arrow 0.4s cubic-bezier(0.18, 0.06, 0.23, 1) 0s;
          animation: arrow 0.4s cubic-bezier(0.18, 0.06, 0.23, 1) 0s;
}
@media (max-width: 991px) {
  .product--name {
    font-size: 1.6rem;
  }
}