.root {
  @apply relative max-h-full w-full box-border overflow-hidden
  bg-no-repeat bg-center bg-cover transition-transform
  ease-linear cursor-pointer;
  height: 100% !important;
  display: flex;
  flex-flow: row nowrap;

  &:hover {
    & .squareBg:before {
      transform: scale(0.98);
    }

    & .productImage {
      /* transform: scale(1.2625); */
    }

    & .productTitle > span,
    & .productPrice,
    & .wishlistButton {
      @apply bg-secondary text-secondary;
    }
  }
}

.button {
  @apply bg-gray-900 hover:bg-gray-500;
  padding: 10px 30px;
  color: white;
  /* background: black; */
  font-weight: 600;
  width: fit-content;
  height: auto;
  border-radius: 20px;
  text-align: center;
  transition: 0.3s;
}

.squareBg,
.productTitle > span,
.productPrice,
.wishlistButton {
  @apply transition-colors ease-in-out duration-500;
}

.squareBg {
  @apply transition-colors absolute inset-0 z-0;
  background-color: #212529;
}

.squareBg:before {
  @apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block;
  background-image: url('/bg-products.svg');
  content: '';
}

.simple {
  & .squareBg {
    @apply bg-accents-0 !important;
    background-image: url('/bg-products.svg');
  }
}


.imageContainer {
  @apply flex items-center justify-center;
  overflow: hidden;

  & > div {
    min-width: 50%;
  }
}

.productImage {
  @apply transform transition-transform duration-500 object-cover scale-120;
}