.see-saw {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background: #201F41;*/
}

.see-saw-inner {
  position: relative;
  width: 50vw;
  height: 0;
  transform-origin: center center;
}

.beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #7DB6DF;
}

.seat {
  position: absolute;
  /*
  width: 260px;
  padding: 50px;
  */
  width:360px;
  padding-left:55px;
  padding-right:55px;
  color: #fff;
  /*font-weight: 600;*/
  line-height:1.13;
  font-size:110%;
  text-align: center;
  border-radius: 1rem;
  opacity: 0;
  aspect-ratio: 1.15/1;
  background-image: url('../../../images/HEX_Sky.svg');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px)
{
  .seat
  {
    width:290px;
    font-size:85%;
  }
}

.seat--left {
  left: 0;
  transform: translate(-50%, -50%);
  top: -170px;
}

.seat--right {
  right: 0;
  transform: translate(50%, -50%);
  top: 170px;
}

.see-saw[data-orientation="reversed"] .seat--left {
  top: 170px;
}
.see-saw[data-orientation="reversed"] .seat--right {
  top: -170px;
}