.eyes {
  display: flex;
  flex-flow: row wrap;
  width: 280px;
  margin-right: calc(50% - 140px);
  margin-left: calc(50% - 140px);
  transition: var(--speed) all ease-in;
  position: absolute;
  bottom: 50px;
  display: none;
}
.eyes .txt{
  width: 100%;
    z-index: 1;
    text-align: center;
    color: #fff;
    font-size: 22px;
}
.eyes .eye {
  pointer-events: none;
position: relative;
width: 100px;
height: 100px;
display: block;
background-color: #fff;
margin: 0 20px;
border-radius: 50%;
box-shadow: 0 5px 45px rgba(0, 0, 0, 0.2), inset 0 0 15px #f5af19,
  inset 0 0 25px #f5af19;
}
.eyes .eye::before {
content: "";
top: 50%;
left: 35px;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border-radius: 50%;
background: #000;
position: absolute;
border: 10px solid skyblue;
box-sizing: border-box;
}


.hover-left .eyes {
  margin-right: calc(var(--other-width) - 140px);
  margin-left: calc(var(--hover-width) - 140px);
}

.hover-right .eyes {
  margin-right: calc(var(--hover-width) - 140px);
  margin-left: calc(var(--other-width) - 140px);
}