.swipe-hint {
    text-align: center;
    margin-top: 1rem;
}

.swipe-hint__container {
    animation: none;
    display: inline-block;
}

.swipe-hint__icon {
    fill: currentColor;
    height: 1.25em;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.swipe-hint__text {
    display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
    .swipe-hint__container[data-viewport="true"] {
        animation: swipe-hint 2.5s 2 ease-in-out;
    }
}

@media (min-width: 48rem) {
    .swipe-hint {
        display: none;
    }
}

@keyframes swipe-hint {
    0%,
    70%,
    80%,
    90%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50% {
        transform: translate3d(-0.625rem, 0, 0);
    }

    20%,
    40%,
    60% {
        transform: translate3d(0.625rem, 0, 0);
    }
}