.collage-container {
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
    overflow: hidden;
    margin-bottom: 56px;
    background-color: #424242;
    z-index: -1;
}
.collage-container-perspective {
    height: 100%;
    position: relative;
}
.collage-box {
    margin: 5px 0;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    flex-wrap: nowrap;
    flex-grow: 1;
    transform: translateX(100px) translateY(-200px);
}
.collage-thumbnail {
    transform-style: preserve-3d;
    min-width: 160px;
    min-height: 160px;
    display: inline-block;
    background-position: center;
    background-size: cover;
    margin: 7px;
    border-radius: 12px;
}
.collage-thumbnail-offset {
    transform-style: preserve-3d;
    min-width: 240px;
    min-height: 160px;
    display: inline-block;
    background-position: center;
    background-size: cover;
    margin: 7px;
    padding-left: 80px;
    border-radius: 12px;
}
.collage-container-background {
    height: 100%;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(1300px);
    transform-style: preserve-3d;
    animation: collage_move 180s linear infinite alternate;
}
@keyframes collage_move {
    to {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-100px);
    }
}
@media (max-width: 768px) {
    .collage-container-background {
        animation: none !important;
        transform: none !important;
        transition-property: none !important;
        opacity: 1 !important;
    }
}
.collage-gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.8) 15%,
        rgba(0, 0, 0, 0.8) 50%,
        rgba(0, 0, 0, 0.8) 70%,
        rgba(0, 0, 0, 0.8) 95%,
        rgba(0, 0, 0, 0) 100%
    );
    opacity: 0.75;
}
.collage-fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
}