.relative {
    position: relative;
    height: 100%;
    ;
}

.arrow {
    position: absolute;
    opacity: .3;
}

.arrow::before {
    content: url("https://icongr.am/clarity/angle.svg?size=30&color=currentColor");
    display: inline-block;
}

.arrow:hover, .arrow:focus {
    opacity: 1;
}

.arrow-left {
    top: calc(50% - 27px);
    left: 0;
}

.arrow-left::before {
    transform: rotateZ(-90deg);
}

.arrow-right {
    top: calc(50% - 27px);
    right: 0
}

.arrow-right::before {
    transform: rotateZ(90deg);
}

.carousel-img{
    object-fit: cover;
    height: 100%;
    width: 100%;
    display: none;
}

.active {
    display: block;
}