:root {
    --slider-transition: all .8s ease-out;
}

.slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    padding: 0 20px;
    box-sizing: border-box;
}

.slider__images {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px; 
    transition: var(--slider-transition);
    max-width: 1598px;
    margin: 0 auto;
    position: relative;
}

.slider__images__item {
    /*max-width: 1598px;*/
    flex-shrink: 2;
    width: auto;
    max-width: 100%;
    border-radius: 6px;
    filter: contrast(0.3) grayscale(0.5);
    transition: var(--slider-transition);
}

.slider__images__item.active {
    filter: none;
}

.slider__controls {
    max-width: 1598px;
    padding: 0 20px;
    width: 100%;
    height: inherit;
    margin: 0 auto;
    left: 0;
    right: 0;
    position: absolute;
    box-sizing: border-box;
}

.slider__controls__item {
    position: absolute;
    backdrop-filter: blur(50px);
    box-shadow: 0px 2px 3.6px 0px #0000001F;
    border-radius: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 36px;
    z-index: 5;
    background-color: #F4F3F0DB;
    cursor: pointer!important;
    transition: .3s ease-in;
}

.slider__controls__item__icon {
    width: 16px;
}

.slider__controls__item.prev {
    bottom: 28%;
    left: 30px;
}

.slider__controls__item.next {
    top: 25%;
    right: 30px;
}

.slider__controls__item.prev .slider__controls__item__icon {
    transform: rotate(180deg);
}

.slider__points {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}

.slider__points__item {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #F4F3F0;
    transition: var(--slider-transition);
}

.slider__points__item.active {
    background-color: #BEBEB1;
}