/* I-set ang eksaktong sukat ng card base sa height ng imahe mo */
.flip-card {
  width: 100%;        /* O pwedeng eksaktong lapad, hal. 350px */
  max-width: 436px;   /* Baguhin ayon sa gusto mong maximum na lapad */
  height: 520px;      /* Dito natin itatali ang taas para walang empty space */
  perspective: 1000px;
}

/* Ang container na iikot */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* Iikot ang card kapag hinover */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* KRITIKAL: Kailangan may position: absolute at top/left 0 para magpatong sila */
.flip-card-front, .flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Harap na bahagi */
.flip-card-front {
  background-color: #bbb;
  color: black;
  z-index: 2; /* Sinisiguradong nasa ibabaw ang harap sa umpisa */
}

/* Likod na bahagi */
.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

/* Siguraduhing swak ang mga imahe sa kabuuang sukat ng card */
.flip-card img {
  width: 100%;
  height: 100%;
  object-fit: inherit; /* Mas maganda ang 'cover' o 'contain' kaysa 'inherit' para hindi ma-stretch ang image */
  display: block;
}