.disko-component-patchwork
{
    position: relative;
    width: 100%;
    
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    overflow: hidden;
    
    --title-size: 16vw;
    --title-size: max(100px, min(16vw, 220px));
    --title-size: clamp(100px, 16vw, 220px);
    --top-bottom-margin: calc(0.75 * var(--title-size));
}

.disko-component-patchwork .title
{
    margin: 0 0 -0.15em;
    color: transparent;
    font-size: var(--title-size);
    line-height: 0.7em;
    font-weight: 100;
    white-space: nowrap;
    
    animation: title-animation;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-delay: calc( var(--scroll-y) * -3ms);
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
}
.disko-component-patchwork .title::before,
.disko-component-patchwork .title::after
{
    content: attr(data-text) attr(data-text);
}
@keyframes title-animation
{
    0% { transform: translateX(0); }
    100% { transform: translateX(-44.4%); }
}
.disko-component-patchwork .swiper-container 
{
    width: 100%;
    height: 100%;
    /* margin: var(--top-bottom-margin) 0 1vw; */
    
    max-width: 1280px;
    margin: var(--top-bottom-margin) auto 1vw;
}
/* add margin if no title contributed */
.disko-component-patchwork .swiper-container:first-child 
{
    margin: var(--top-bottom-margin) auto var(--top-bottom-margin);
}
.disko-component-patchwork .swiper-wrapper 
{
    display: flex;
    flex-direction: row;
}
.disko-component-patchwork .swiper-slide 
{
    position: relative;
    width: 100%;
    height: 100%;
    height: 76vw;
    flex-shrink: 0;
    transition-property: transform;
    overflow: hidden;
}
.disko-component-patchwork .patchwork-img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease-in-out 0s;
}
.disko-component-patchwork a:hover .patchwork-img {
    transform: scale(1.1);
}


/* Mobile view */
.disko-component-patchwork .swiper-container-multirow > .swiper-wrapper
{
    flex-wrap: wrap;
    justify-content: center;
}
.disko-component-patchwork .swiper-container-multirow .swiper-slide
{
    width: 33vw !important;
    height: 33vw;
    max-width: 450px;
    max-height: 450px;
}
.disko-component-patchwork .swiper-pagination
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 38px;
}
.disko-component-patchwork .swiper-pagination-bullet
{
    width: 9.6mm;
    height: 9.6mm;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.disko-component-patchwork .swiper-pagination-bullet + .swiper-pagination-bullet
{
    margin-left: 8px;
}
.disko-component-patchwork .swiper-pagination-bullet::after 
{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: white;
    opacity: 0.5;
}
.disko-component-patchwork .swiper-pagination-bullet.active::after
{
    opacity: 1;
}

@media screen and (max-width: 767px)
{
    .disko-component-patchwork .swiper-slide
    {
        margin-top: 0 !important;
    }
}
@media screen and (min-width: 768px)
{
    .disko-component-patchwork .swiper-wrapper
    {
        width: 100% !important;
    }
    .disko-component-patchwork .swiper-slide-duplicate,
    .disko-component-patchwork .swiper-pagination
    {
        display: none;
    }
}