.sliderWrapper {
    display: flex;
    flex-direction: column;
    --slider-height: 460px;
    --dot-size: 10px;
    --dot-gap: 8px;
    --dot-color: var(--blue-color);
    --dot-active: var(--pink-color);
    position: relative;
    .sliderDots {
        margin: 0;
        position: absolute;
        right: 30px;
        top: 50%;
        display: flex;
        flex-direction: column;
        transform: translate(-50%, -50%);
    }
}




.sliderWrapper::before {
    content: "";
    display: flex;
    align-self: flex-end;
    width: 67.5%;
    height: 9px;
    background-color: var(--pink-color);
}

.sliderWrapper::after {
    content: "";
    display: flex;
    align-self: flex-start;
    width: 67.5%;
    height: 9px;
    background-color: var(--orange-color);
}