/* this is the smartest way to have bottom margin on cols within a row
   it removes the issue of having unwanted bottom margin on stacked cols in bottom row
   but maintains bottom margin on earlier rows */
.flip-card-container > .row {
  gap: 1rem 0;
}

.flip-card {
  perspective: 1000px;
  width: 100%;
  max-width: 100%;
  display: inline-block; /* Ensures cards stay inline with each other */
  height: auto; /* Allow dynamic height based on content */
  /* background-color: transparent; */
}

/* Flip card inner container (for the flip effect) */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%; /* Ensure that the inner card fills its parent */
  transform-style: preserve-3d;
  transition: transform 4s; /* Default transition duration */
  display: flex;
  flex-direction: column; /* Allow growing content */
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* Flip card on hover */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  transition: transform 1s; /* Return transition (1 second) */
}

/* Front and back faces of the card */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Safari */
  display: flex; /* Allow content inside to flex */
  flex-direction: column; /* Keep content in a vertical stack */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  height: auto; /* Allow faces to grow based on content */
  padding: 0 10px; /* Ensure padding inside */
}

/* Front face styling */
.flip-card-front {
  padding-top: 0; /* Adjust padding as needed */
}

/* Back face styling */
.flip-card-back {
  transform: rotateY(180deg);
  padding: 2rem 20px; 
}