.slider {width: 100vw;height: 100vh;}
.slide {position: absolute;width: 100%;height: 100%;background-size: cover;background-position: center;opacity: 0;transition: opacity 0.5s ease-in-out;}
.slide.active {opacity: 1;}
.controls {position: absolute;top: 50%;width: 100%;display: flex;justify-content: space-between;transform: translateY(-50%);}
.arrow {position: relative;float:left; width:40px;height:40px; cursor: pointer; background: rgba(0,0,0,0); border:none; border-radius: inherit; padding: 0}
.arrow:hover{ background: rgba(0,0,0,0); transform: none; box-shadow: none !important }
.arrow.prev::after, .arrow.next::after{position: absolute;top: 10px;
content: '';width: 20px;height: 20px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(225deg);}
.arrow.prev::after {right: 0px; transform: rotate(225deg);}
.arrow.next::after {left: 0px; transform: rotate(45deg);}	

.dots {position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%);display: flex;gap: 10px;}
.dot {width: 12px;height: 12px;background: white;border-radius: 50%;opacity: 0.5;transition: opacity 0.3s ease, transform 0.3s ease;cursor: pointer;}
.dot.active {opacity: 1;transform: scale(1.5);}
.info {position: absolute;bottom:0px;left: 50%;transform: translateX(-50%);color: white;padding: 5px 10px;border-radius: 5px;}

@media only screen and ( max-width: 680px )  {
.slider {width: 100vw;height: 40vh;}
}