.marquee {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

    .marquee .item {
        display: none;
    }

        .marquee .item.active {
            white-space: nowrap;
            vertical-align: sub;
            width: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .marquee .item a {
            text-decoration: none;
            color: inherit;
        }

        .marquee .item p {
            margin-bottom: 0;
        }

        .marquee .item.left {
            animation: marquee-left 13s linear forwards;
        }

        .marquee .item.right {
            animation: marquee-right 13s linear forwards;
        }

        .marquee .item.up {
            animation: marquee-up 13s linear infinite;
        }

        .marquee .item.down {
            animation: marquee-down 13s linear infinite;
        }

        .marquee .item.fadein {
            animation: marquee-fadeIn 13s linear infinite;
            white-space: normal
        }

        .marquee .item:hover {
            animation-play-state: paused;
        }

@keyframes marquee-left {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes marquee-right {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes marquee-up {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(-150%);
    }
}

@keyframes marquee-down {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

@keyframes marquee-fadeIn {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}