.animation-gift {
  animation: pulse 0.8s infinite;
  animation-timing-function: linear;
}

.tile {

  position: absolute;
  transform-style: preserve-3d;
  transform-origin: centerS;
  transition: all 0.5s;

  width: 33vw;
  height: 37vw;
}

#tile1 {
  margin: 0rem auto;

  left: 22%;
}

#tile1 .tile__face--front {
  background-image: url("../image/tombol/Angpao.png");
  background-repeat: no-repeat;
  background-size: 72%;
}

#tile2 {
  margin: 0rem auto;

  right: 10%;
}

#tile2 .tile__face--front {
  background-image: url("../image/tombol/Angpao.png");
  background-repeat: no-repeat;
  background-size: 72%;
}

#tile3 {
  margin: 38vw auto;

  left: 22%;
}

#tile3 .tile__face--front {
  background-image: url("../image/tombol/Angpao.png");
  background-repeat: no-repeat;
  background-size: 72%;
}

#tile4 {
  margin: 38vw auto;

  right: 10%;
}

#tile4 .tile__face--front {
  background-image: url("../image/tombol/Angpao.png");
  background-repeat: no-repeat;
  background-size: 72%;
}

.tile:hover {
  cursor: pointer;
  transform: scale(1.08);
}

.tile__face {
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  width: 100%;
  height: 100%;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@media (min-width: 992px) {

  .tile {

    position: absolute;
    transform-style: preserve-3d;
    transform-origin: centerS;
    transition: all 0.5s;

    width: 8rem;
    height: 10rem;

    color: #fff;
    font-family: sans-serif;
  }

  #tile1 .tile__face--front {
    background-size: 80%;
  }

  #tile2 .tile__face--front {
    background-size: 80%;
  }

  #tile3 .tile__face--front {
    background-size: 80%;
  }

  #tile4 .tile__face--front {
    background-size: 80%;
  }

  #tile2 {
    right: 10%;
  }

  #tile3 {
    margin: 8rem auto;

  }

  #tile4 {
    margin: 8rem auto;

    right: 10%;
  }
}