div {
	margin:0;
	padding:0;
	outline:none;
}

.demo {
	position:relative;
	margin-top:50px;
    margin-bottom:50px;

    height: 100%;
}

.slider-holder {
	position:relative;
	margin:0 auto;

    width: 100%;
    height: 100%;
}

.slider {
	position:relative;
	overflow:hidden;

    width: 100%;
    height: 100%;
}

.slider-item {
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	height:fit-content;

    transform: translateY(-50%);
}

/*
            Navigation
        */
.slider-nav {
	margin-top:20px;
}

.slider-nav-btn {
	display:inline-block;
	padding:4px;
	margin-right:10px;
	cursor:pointer;
	border-radius:3px;
	transition:all .2s;
}

.slider-nav-btn:hover {
	background-color: #DDD;
}

.slider-nav-btn:last-child {
	margin-right:0;
}
.slider-nav-btn{
    position: absolute;
    top: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    width: 33px;
    height: 33px;
}
.go-prev{
    left: -0;
    transform: translate(-100%,-50%);
}
.go-next{
    right: 0;
    transform: translate(100%,-50%);
}
.slider-item{
    display: flex;
    justify-content: center;
    align-items: center;
}
.slider-item img{
    width: min(80%, 800px);
}
.dots-container{
    display: flex;
    flex-direction: row;
    gap: 17px;
}
.dot{
    width: 16px;
    height: 16px;

    background-color: #D9D9D9;
    border-radius: 50%;

    cursor: pointer;
}
.dot.selected{
    background-color: var(--custom-blue);
}