/* Grid Layout */
.grid01 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
}

/* Flip Card */
.flipcard {
  width: 100%;
  min-height: 430px;
  perspective: 1000px;
}

.flipcard_inner {
  position: relative;
  width: 100%;
  height: 430px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* Mobile Click */
.flipcard.flipped .flipcard_inner {
  transform: rotateY(180deg);
}

.flipcard_front,
.flipcard_front_blue,
.flipcard_back {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  width: 100%;
  height: 100%;

  padding: 25px;
  box-sizing: border-box;

  border-radius: 12px;
  backface-visibility: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,0.80);

  overflow-y: auto;
}

/* Front Side */
.flipcard_front {
  background: white;
}

.flipcard_front_blue {
  background: #27488e;
}

/* Back Side */
.flipcard_back {
  background: #5c6d94;
  transform: rotateY(180deg);
}

/* Text Styling */
.flipcard h4 {
  margin-bottom: 15px;
}

.flipcard p {
  margin-bottom: 10px;
}

.flipcard ul {
  padding-left: 20px;
  margin: 10px 0 0;
}

.flipcard li {
  margin-bottom: 2px;
}

/* Tablet & Desktop */
@media (min-width: 768px) {
  .grid01 {
    grid-template-columns: repeat(2, 1fr);
  }

  .flipcard:hover .flipcard_inner {
    transform: rotateY(180deg);
  }
}

/* Desktop View */
@media only screen and (min-width: 1024px) {
}

/* Desktop View (Big) */
@media only screen and (min-width: 1580px) {
}