.flipbg .flip-card {
    position: relative;
    background-color: transparent;
    width: 600px;
    height: 300px;
    perspective: 1000px;
  }
  
  .flipbg .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3), 0 10px 30px 0 rgba(0, 0, 0, 0.25);
  }
  
  .flipbg .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flipbg .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flipbg .flip-card-front {
    background-color: gold;
    border-radius: 10px;
    color: purple;
  }

  .flipbg .flip-card-front img {
    position: relative;
    height: 300px;
    width: 600px;
    border-radius: 10px;
  }

  .flipbg .flip-card-back {
    background-color: purple;
    border-radius: 10px;
    padding-top: 70px;
    color: gold;
    transform: rotateY(180deg);
  }

  .flipbg .flip-card.ttclass {
    position: absolute;
    top: 350px;
    left: 100px;
  }

  .flipbg .flip-card.spclass {
    position: absolute;
    top: 700px;
    right: 100px;
  }

  .flipbg .flip-card.bwclass {
    position: absolute;
    top: 1050px;
    left: 100px;
  }

  @media only screen and (max-width: 1024px) {
    .flipbg .flip-card {
      width: 600px;
      height: 300px;
      perspective: 800px;
  
    }
  
    .flipbg .flip-card-front img {
      position: relative;
      height: 300px;
      width: 600px;
    }
  
    .flipbg .flip-card-back {
      font-size: 16px;
      padding: 70px 5px 0px 5px;
    }
  
    .flipbg .flip-card.ttclass {
      top: 220px;
      left: 20px;
    }
  
    .flipbg .flip-card.spclass {
      top: 550px;
      right: 20px;
    }
  
    .flipbg .flip-card.bwclass {
      top: 880px;
      left: 20px;
    }
  }
  
@media only screen and (max-width: 620px) {
  .flipbg .flip-card {
    width: 100%;
    height: 280px;
    perspective: 800px;

  }

  .flipbg .flip-card-front img {
    position: relative;
    height: 280px;
    width: 100%;
  }

  .flipbg .flip-card-back {
    font-size: 16px;
    padding: 70px 5px 0px 5px;
  }

  .flipbg .flip-card.ttclass {
    top: 170px;
    left: 0px;
  }

  .flipbg .flip-card.spclass {
    top: 470px;
    left: 0px;
  }

  .flipbg .flip-card.bwclass {
    top: 770px;
    left: 0px;
  }
}
@media only screen and (max-width: 412px) {
  .flipbg .flip-card {
    width: 100%;
    height: 230px;
    perspective: 800px;

  }

  .flipbg .flip-card-front img {
    position: relative;
    height: 230px;
    width: 100%;
  }

  .flipbg .flip-card-back {
    font-size: 13px;
    padding: 40px 5px 0px 5px;
  }

  .flipbg .flip-card.ttclass {
    top: 170px;
    left: 0px;
  }

  .flipbg .flip-card.spclass {
    top: 420px;
    left: 0px;
  }

  .flipbg .flip-card.bwclass {
    top: 670px;
    left: 0px;
  }
}
@media only screen and (max-width: 360px) {
  .flipbg .flip-card {
    width: 360px;
    height: 200px;
    perspective: 800px;

  }

  .flipbg .flip-card-front img {
    position: relative;
    height: 200px;
    width: 360px;
  }

  .flipbg .flip-card-back {
    font-size: 10px;
    padding: 30px 5px 0px 5px;
  }

  .flipbg .flip-card.ttclass {
    top: 170px;
    left: 0px;
  }

  .flipbg .flip-card.spclass {
    top: 390px;
    left: 0px;
  }

  .flipbg .flip-card.bwclass {
    top: 610px;
    left: 0px;
  }
}