@import "../../../assets/scss/variables";


.slide-container {
    max-width: 1300px;
    margin: auto auto 5rem auto;

   .slick-prev {
            &::before {
                content: url('../../../assets/images/arrowleft.svg');
            }

            @media only screen and (max-width: 1875px) {
                left: -40px;
            }

            @media only screen and (max-width: 1800px) {
                left: -20px;
            }
    }

    .slick-next{

        &::before {
            content: url('../../../assets/images/arrowright.svg');
        }

        @media only screen and (max-width: 1775px) {
            right: 20px;
        }
    }

    .slick-prev, .slick-next {
        @media only screen and (max-width: 975px) {
            top: 36%;
        }
    }


   .slick-list {
    min-height: 300px;
     cursor:grab;
   }

   .slick-dots {
    bottom: 20px;
    right: -5px;

    li button {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #ccc;

        &::before {
            content: '';
        }
    }

    .slick-active button {
        background-color: #4572E4;
        color: $secondary-color;
    }

    @media only screen and (max-width: 974px) {
        bottom: 10px;
        right: 15px;
    }
   }
}