.red_container {
  background-image: -webkit-radial-gradient(31.7% 40.2%, circle 15.68rem, #e1c8ef 21.4%, #a3e1e9 57.1%);
  background-image: radial-gradient(circle 15.68rem at 31.7% 40.2%, #e1c8ef 21.4%, #a3e1e9 57.1%);
  position: relative;
  padding: 5% 0.53333rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  height: 100%;
}
.red_pack {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  height: 100%;
}
.item {
  width: 33.33%;
  height: 4rem;
  padding: 4rem 0 0 0;
}
.just,
.back {
  width: 2.66667rem;
  height: 4rem;
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.75s ease-in-out;
  transition: -webkit-transform 0.75s ease-in-out;
  transition: transform 0.75s ease-in-out;
  transition: transform 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  color: #fff;
}
.just {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  background-image: -webkit-linear-gradient(340.4deg, #f53838 11.2%, #eac075 78%);
  background-image: linear-gradient(109.6deg, #f53838 11.2%, #eac075 78%);
}
.back {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  background-image: -webkit-linear-gradient(333deg, #7bd860 39.2%, #ffffff 156.2%);
  background-image: linear-gradient(117deg, #7bd860 39.2%, #ffffff 156.2%);
}