:root {
    --topmusic-scroller-element-width: 320px;
    --topmusic-scroller-element-height: 240px;
    --topmusic-scroller-element-margin: 10px;
    --topmusic-scroller-element-width-with-margin: 340px;
}
.topmusic-recent-blog-posts {
    padding-bottom:10px;
}
.topmusic-css-scroller {
    width: 100vw;
    max-width: calc(var(--topmusic-scroller-element-width-with-margin) * 6);
    height: var(--topmusic-scroller-element-height);
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    margin: 0 auto calc(var(--topmusic-scroller-element-margin) * 2);
    white-space: nowrap;
}
.topmusic-recent-blog-posts-group {
    width: calc(var(--topmusic-scroller-element-width-with-margin) * 6 * 3);
    height: var(--topmusic-scroller-element-height);
    transform: translate3d(0, 0, 0);
    position: absolute;
    top:0;
    left:0;
}
.topmusic-recent-blog-posts-group.animate-left {
    animation: topmusic-css-scroller-animation-left 120s ease-in-out infinite;
}
.topmusic-recent-blog-posts-group.animate-right {
    left: calc(var(--topmusic-scroller-element-width-with-margin) * 6 * 2 * -1);
    animation: topmusic-css-scroller-animation-right 120s ease-in-out infinite;
}

.topmusic-recent-blog-posts-group:hover,
.topmusic-recent-blog-posts-group.animate-right:hover,
.topmusic-recent-blog-posts-group.animate-left:hover {
    animation-play-state: paused;
}
.topmusic-recent-blog-post {
    width:var(--topmusic-scroller-element-width);
    height:var(--topmusic-scroller-element-height);
    margin: 0 var(--topmusic-scroller-element-margin);
    display: inline-block;
}
.topmusic-recent-blog-post .topmusic-blog-post-thumbnail img {
    height:var(--topmusic-scroller-element-height);
    width:auto;
}
@keyframes topmusic-css-scroller-animation-left {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-66.6666%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes topmusic-css-scroller-animation-right {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(66.6666%);
    }
    100% {
        transform: translateX(0);
    }
}
.topmusic-gradient-to-white-left{
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 2vw;
}
.dark .topmusic-gradient-to-white-left {
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
.topmusic-gradient-to-white-right{
    background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2vw;
}
.dark .topmusic-gradient-to-white-right {
    background: linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}