* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.slider {
    height: 1e2vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 850px;
}

.slider .carousel {
    position: relative;
    width: 300px;
    height: 200px;
    transform-style: preserve-3d;
    transition: .6s;
    cursor: grab;
}

.slider .carousel:active {
    cursor: grabbing;
}

.slider .carousel .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateX(calc(45deg * var(--i))) translateZ(300px);
}

.slider .carousel .item:hover img {
    scale: 1.1;
}

.slider .carousel .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

.slider .btn {
    position: absolute;
    top: 50%;
    font-size: 4rem;
    cursor: pointer;
    padding: 0 30px 5px 30px;
    background: rgb(248, 77, 182);
    border-radius: 20%;
    box-shadow: 0 0 14px rgb(248, 77, 131), 0 0 39px rgb(248, 77, 182), 0 0 90px rgb(248, 6, 239); 
    border: 0;
    translate: 0 -50%;
    transition: .3s;
    animation: btn 1s 5;
}


.slider .btn.prev {
    left: 1.5%;
    --pos: -20px;
    color: #fff;
}

.slider .btn.next {
    right: 1.5%;
    --pos: 20px;
    color: #fff;
}


.slider .btn:hover {
    background: hsla(60, 100%, 55%, 0.824);
    color: rgb(255, 255, 255);
    box-shadow: 0 0 40px rgb(5, 220, 30), 0 0 59px rgb(18, 164, 59), 0 0 110px rgb(27, 11, 108); 

}

@keyframes btn {
    50% {translate: var(--pos) -50%;}
}

.slider .inp {
    position: absolute;
    bottom: 5%;
    left: 1%;
    accent-color: lime;
    cursor: pointer;
    width: 100px;
    outline: 0;
}