.pk-component.logo_slider .swiper-slide{
    display: flex;
    align-items: center; justify-content: center;
    max-width: max(10rem, calc( 10 * var(--su)));
    max-height: max(3.5rem, calc(3.5 * var(--su)));
    width: fit-content;
    height: auto;
    border-radius: max(.5rem, calc(.5 * var(--su)));

    transition: background-color 150ms ease-in-out;
}

.pk-component.logo_slider .swiper-slide:hover{
    background-color: hsla(0, 100%, 100%, 0.2);
}

.pk-component.logo_slider .swiper img{
    width: 100%; height: 100%;
    object-fit: contain;
    margin-inline: auto;
    opacity: 0;
    pointer-events: none;
}

.pk-component.logo_slider .swiper .mask{
    position: absolute;
    width: 100%; height: 100%;
    background-color: currentColor;
    mask: var(--mask-url) no-repeat center / contain;
    -webkit-mask: var(--mask-url) no-repeat center / contain;

    transition: scale 500ms ease-out;
}

.pk-component.logo_slider .swiper-slide:hover .mask{
    scale: 1.05;
}