/* .dots {
    display        : flex;
    padding        : 10px 0;
    justify-content: center;
}

.dot {
    border       : none;
    width        : 10px;
    height       : 10px;
    background   : #c5c5c5;
    border-radius: 50%;
    margin       : 0 5px;
    padding      : 5px;
    cursor       : pointer;
}

.dot:focus {
    outline: none;
}

.dot--active {
    background: #FBBF24;
}

.arrow {
    width            : 25px;
    height           : 25px;
    position         : absolute;
    top              : 50%;
    transform        : translateY(-50%);
    -webkit-transform: translateY(-50%);
    cursor           : pointer;
}

.arrow--left {
    left: 0;
}

.arrow--right {
    left : auto;
    right: 0;
} */

.dots {
    padding        : 10px 0;
    justify-content: center;
}

.dot {
    border          : none;
    width           : 10px;
    height          : 10px;
    /* background   : #c5c5c5; */
    background      : gray;    
    border-radius   : 50%;
    margin          : 0 5px;
    padding         : 5px;
    cursor          : pointer;
}

.dot:focus {
    outline: none;
}

.dot--active {
    background   : #003663;
    width        : 20px;
    border-radius: 12px;
}

.arrow {
    width : 35px;
    height: 35px;
    cursor: pointer;
}

.arrow--left {
    left: 0;
}

.arrow--right {
    left : auto;
    right: 0;
}