.overlap-light-background {
    position: relative;
}

.overlap-light-background::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 16%;
    left: 0;
    top: 0;
    background-color: var(--branded-theme-colours-background-default-primary);
}

.hero-screenshot {
    width: 100%;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(16px 16px 64px rgba(0, 0, 0, 0.33)) drop-shadow(8px 8px 32px rgba(0, 0, 0, 0.33));
}







@keyframes infiniteScroll {
    from {transform: translateX(0)}
    to {transform: translateX(calc(-25% - var(--constant-padding-small)))}
}

.horizontal-scrolling-items {
    animation-name: infiniteScroll;
    animation-duration: 720s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes infiniteScrollRight {
    from {transform: translateX(0)}
    to {transform: translateX(calc(25% + var(--constant-padding-small)))}
}

.horizontal-scrolling-items-right {
    animation-name: infiniteScrollRight;
    animation-duration: 720s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}