.tupperware {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.cube {
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}

.plus-vertical,
.plus-horizontal {
  background: #fff;
  border-radius: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.plus-vertical {
  height: 50%;
  width: 5px;
}

.plus-horizontal {
  width: 50%;
  height: 5px;
}

.quadrant {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.quadrant__item {
  width: 50%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 0px;
  position: relative;
}

.quadrant__item__content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-down,
.arrow-left,
.arrow-right,
.arrow-up {
  opacity: 0;
}

.arrow-up {
  transform: translateY(10px);
}

.arrow-down {
  transform: translateY(-10px);
}

.arrow-left {
  transform: translateX(10px);
}

.arrow-right {
  transform: translateX(-10px);
}