@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;600&display=swap");
.card {
  position: relative;
  height: 400px;
  width: 100%;
  margin: 10px 0;
  transition: ease all 2.3s;
  perspective: 1200px;
}
.card:hover .cover {
  transform: rotateX(0deg) rotateY(-180deg);
}
.card:hover .cover:before {
  transform: translateZ(30px);
}
.card:hover .cover:after {
  background-color: black;
}
.card:hover .cover h2 {
  transform: translateZ(100px);
}
.card:hover .cover .price {
  transform: translateZ(60px);
}
.card:hover .cover a {
  transform: translateZ(-60px) rotatey(-180deg);
}
.card .cover {
  position: absolute;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  transition: ease all 2.3s;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.card .cover:before {
  content: "";
  position: absolute;
  border: 5px solid rgba(255, 255, 255, 0);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  transition: ease all 2.3s;
  transform-style: preserve-3d;
  transform: translateZ(0px);
}
.card .cover:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 2;
  transition: ease all 1.3s;
  background: rgba(0, 0, 0, 0);
}
.card .cover.item-Tile-on-Floor {
  background-image: url("/assets/images/products/Yanni-Plast-Tile-On-Floor-Adhesive-20kg.png");
}
.card .cover.item-Tile-on-Tile {
  background-image: url("/assets/images/products/Yanni-Plast-Tile-On-Tile-Adhesive-20kg.png");
}
.card .cover.item-External-Tile {
  background-image: url("/assets/images/products/Yanni-Plast-Tile-On-External-Stone-Adhesive-20kg.png");
}
/**/
.card .cover.item-Self-Cure-Plaster {
  background-image: url("/assets/images/products/Yanni-Plast-Self-Cure-Plaster-40kg.png");
}
.card .cover.item-Ready-Mix-Plaster {
  background-image: url("/assets/images/products/Yanni-Plast-Ready-Mix-Plaster-40kg.png");
}
.card .cover.item-Water-Proof-Plaster {
  background-image: url("/assets/images/products/Yanni-Plast-Water-Proof-Plaster-40kg.png");
}
/**/
.card .cover.item-Block-Jointing-Mortar {
  background-image: url("/assets/images/products/Yanni-Plast-Block-Jointing-Mortar-Plaster-40kg.png");
}
.card .cover h2 {
background: #f05323;
    font-weight: 600;
    position: absolute;
    bottom: 0px;
    left: 0;
    color: white;
    transform-style: preserve-3d;
    transition: ease all 2.3s;
    z-index: 3;
    font-size: 1.5em;
    transform: translateZ(0px);
    width: 94%;
    /* color: black; */
    padding: 5px 10px 5px 20px;
}
.card .cover .price {
  font-weight: 200;
  position: absolute;
  top: 55px;
  right: 50px;
  color: white;
  transform-style: preserve-3d;
  transition: ease all 2.3s;
  z-index: 4;
  font-size: 2em;
  transform: translateZ(0px);
}
.card .card-back {
  position: absolute;
  height: 100%;
  width: 100%;
  /*background: #ffffff;*/
  background-image: url("/assets/images/products/white-plain-concrete-textured-background.jpg");
  background-size:contain;
  transform-style: preserve-3d;
  transition: ease all 2.3s;
  transform: translateZ(-1px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card .card-back a {
  transform-style: preserve-3d;
  transition: ease transform 2.3s, ease background 0.5s;
  transform: translateZ(-1px) rotatey(-180deg);
  background: #f05323;
  border: 1px solid white;
  font-weight: 200;
  font-size: 1.3em;
  color: white;
  padding: 14px 32px;
  outline: none;
  text-decoration: none;
}
.card .card-back a:hover {
  background-color: white;
  color: #0b0f08;
}