.text-container {
    font-family: sans-serif;
    font-weight: 700;
    font-size: 5vw
}

.word {
    position: absolute;
    color: var(--color-front);
    text-shadow: -1px -1px 1px #eeeeee80, 1px -1px 1px #eeeeee80, -1px 1px 1px #eeeeee80, 1px 1px 1px #eeeeee80;
    transform-origin: 50% 50% 25px;
    transition: transform .5s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity .3s ease-in;

    /* если соотношение более плоское чем 2/1, то размер текста уже от высоты */
    @media (min-aspect-ratio: 2 / 1) {
        & {
          font-size: 10vh;
        }
      }
}

.word.in {
    opacity: 1;
    transform: translateX(-50%) rotateX(0)
}

.word.out {
    opacity: 0;
    transform: translateX(-50%) rotateX(-30deg)
}

@media(max-width:650px) {
    .word {
        text-shadow: 1px 1px 2px #eeeeee80
    }
}