.si
.my-custom-list-display
.my-custom-list-display--item{
	transition: 0.25s ease;
	box-sizing: border-box;
    .si-image{
        transition: 1s ease;
    }

    .si-tags-container{
        width:100%;
        transition: 0.25s ease;
        .si-tags{
                justify-content: center;
        }
    }

    &:hover{
        scale: 1.1;
        .my-custom-list-display--item-data{
            background: transparent;
            transition: 0.25s 0.1s ease;
            .si-label{
                &.si-subcategory,
                &.si-price{
                    translate: -100% 0;
                    opacity:0;
                }

                &.si-city,
                &:has(.si-rooms){
                    translate: 100% 0;
                    opacity:0;
                }
            }
        }
        .si-tags-container{
            opacity:0;
            translate: 0 100%;
        }
        .si-image{
            scale:1.1;
        }
    }
} 

.si
.my-custom-list-display
.my-custom-list-display--item
.my-custom-list-display--item-data{
    --si-text-color: #fff;
    position:absolute;
    inset:0;
    background: #0005;
    display:flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    transition: 0.25s ease;
    box-sizing: border-box;

    .si-label{
        transition: 0.25s ease;
        text-align: center;
        box-sizing: border-box;
        &.si-price,
        &.si-price-sold{			
            font-size: 1.75rem;
            font-weight: bold;
        }

        &.si-subcategory{
            opacity: 0.8;
        }

        &.si-city{
            text-transform: uppercase;
        }

        &.si-price-sold{
            color: #fff;
            padding: 0.5rem 1rem;
            border-radius: var(--si-border-radius);
            background: var(--si-text-color);
        }
    }
    .si-item-link-button{
        box-sizing: border-box;
        position:absolute;
        bottom: var(--si-layout-gutter);
        left: 50%;
        opacity: 0;
        translate: -50% 100%;
        transition: 0.25s ease;
    }
    &:hover{
        background: transparent;
        transition: 0.25s 0.1s ease;
        .si-label{
            &.si-subcategory,
            &.si-price-sold,
            &.si-price{
                translate: -100% 0;
                opacity:0;
            }

            &.si-city,
            &:has(.si-rooms){
                translate: 100% 0;
                opacity:0;
            }

            &.si-price,
            &.si-price-sold,
            &:has(.si-rooms){
                transition-delay: 0.1s;
            }
        }

        .si-item-link-button{
            opacity: 1;
            translate: -50% 0%;
            transition: 0.25s 0.25s ease;
        }
    }
}