.flipbox {
  position: relative;
  overflow: hidden;
}

/* FRONT */
.flipbox__front {
  position: relative;
  z-index: 2;
  transition: transform .45s ease;
}

/* BACK */
.flipbox__back {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  transform: translateY(100%);
  transition: transform .45s ease;
  z-index: 3;
  overflow: auto;
  max-height: 100%;
}

/* DESKTOP hover */
@media (min-width: 768px) {
  .flipbox:hover .flipbox__back {
    transform: translateY(0);
  }
}

/* MOBILE state */
.flipbox.is-open .flipbox__back {
  transform: translateY(0);
}

/* Toggle icons */
.flipbox__toggle {
  cursor: pointer;
  display: none;
}

/* vizibile doar pe mobil */
@media (max-width: 767px) {
  .flipbox__toggle {
    display: inline-flex;
  }
}

/* optional poziționare */
.flipbox__open {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

.flipbox__close {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
}