.wrapper-pet-carousel {
    position: relative;
    #left-pet-carousel {
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
        transition: all 0.5s;
        opacity: 0;
    }

    #right-pet-carousel {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        transition: all  0.5s;
        opacity: 0;
    }

    &:not(.cancelRows)&:hover{
        #left-pet-carousel {
            opacity: 1;
            left: 30px;
            transform:  translateY(-50%);
        }
        #right-pet-carousel {
            opacity: 1;
            right: 30px;
            transform:  translateY(-50%);
        }
    }


    .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(240px, auto);
        column-gap: 1rem;
        overflow-x: scroll ;
        scrollbar-width: none;
        cursor: grab;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        .card-pet-carousel {
            padding: 0 0.5rem;
            scroll-snap-align: start;
            height: 240px;
            width: 240px;
        }
        &.dragging{
            cursor: grabbing;
            .card-pet-carousel{
                scroll-snap-align: none;
            }
        }

        @media (min-width: 768px) {
            grid-auto-columns: minmax(320px, auto);
            .card-pet-carousel {

                height: 320px;
                width: 320px;
            }
        }

        @media (min-width: 1280px) {
            grid-auto-columns: minmax(420px, auto);
            .card-pet-carousel {
                height: 420px;
                width: 420px;
            }
        }


    }
}