.flip-box {
  background-color: transparent;
  width: 100%;
  perspective: 1000px;
}

.flip-box > .flip-box-inner {
  position: relative;
  width: 100%;
  min-height: 210px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-box.active .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box .flip-box-front,
.flip-box .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: auto;
  padding: 32px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-radius: 16px;
}

.flip-box .flip-box-front {
  background-color: var(--second-color);
  color: var(--first-color);
}

.flip-box .flip-box-back {
  background-color: var(--first-color);
  color: var(--second-color);
  transform: rotateX(180deg);
}

.flip-box .flip-box-front .flip-corner-fold {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 54px;
  height: 45px;
}
.flip-box .flip-box-back .flip-corner-fold {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width: 54px;
  height: 45px;
}

.flip-box .flip-box-front .flip-corner-fold:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 0;
  height: 0;
  border-width: 12px 29px 12px 29px;
  border-style: solid;
  border-color: transparent transparent var(--color-neutral-off-white) var(--color-neutral-off-white);
  transform: translate(9px, 10px) rotate(23deg);
}
.flip-box .flip-box-front .flip-corner-fold:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 0;
  height: 0;
  border: 21px solid;
  border-color: var(--first-color) var(--first-color) transparent transparent;
}

.flip-box .flip-box-back .flip-corner-fold:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 0;
  height: 0;
  border-width: 12px 29px 12px 29px;
  border-style: solid;
  border-color: var(--color-neutral-off-white) transparent transparent var(--color-neutral-off-white);
  transform: translate(10px, 11px) rotate(-23deg);
}
.flip-box .flip-box-back .flip-corner-fold:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width: 0;
  height: 0;
  border: 21px solid;
  border-color: transparent var(--second-color) var(--second-color) transparent;
}

@media screen and (min-width: 768px) {
  .flip-card .flip-card-front-first {
    align-items: flex-end;
  }

  .flip-card .flip-card-front-first > .block-flip-title {
    text-align: right;
    position: relative;
    top: -60px;
  }

  .flip-card .flip-card-front-second > .block-flip-title {
    transform: translate3d(-1px, 1em, 0);
    position: relative;
    top: -60px;
  }
  .flip-card .flip-card-front-first {
    justify-content: flex-end;
  }

  .flip-card .flip-card-front-second {
    justify-content: flex-start;
  }

  .flip-card .flip-card-front-second {
    align-items: flex-end;
  }

  .flip-card .flip-card-front-second > .block-flip-title {
    text-align: right;
  }

  .flip-card .block-flip-title {
    transform: scaleX(-1);
    width: 100%;
  }
}