.flip-item-container {
  position: relative;
  display: inline-block; /* Allows the container to shrink to fit its content */
  height: max-content; /* Adjusts the height based on the content */
  color: #cecfd2;
  text-align: start;
}

.flip-item {
  position: absolute;
  margin-left: 5px;
  height: max-content;
  backface-visibility: hidden;
  transition: transform 0.5s;
}

.flip-item-back {
  transform: rotateX(180deg);
}

.header-flip-item {
  position: absolute;
  margin-left: 5px;
  height: max-content;
  backface-visibility: hidden;
  transition: transform 0.5s;
}

.header-flip-item-back {
  transform: rotateX(180deg);
}

@keyframes flip {
  0%,
  100% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(180deg);
  }
}