.slider{
    height: 100vh;
    width: 100vw;
    position: relative;
    overflow: hidden;
    color: #a89a54;
    background-color: black;
}
.slider .item{
    position: absolute;
    width: 100%;
    height: 100%;
}
.img-wrapper {
    position: absolute;
    top: 25%;
    left: 30%;
    transform: rotate(-20deg);
}
.slider .item .img{
    position: absolute;
    width: 400px;
    height: 600px;
}
.slider .item .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}
.slider .item .content{
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12rem;
}
.slider .item .content .wrap{
    font-weight: 300;
    letter-spacing: -10px;
    text-align: center;
    max-width: 900px;
}
.slider .item .content .wrap .letter{
    display: inline-block;
}
.slider .nav .next ,
.slider .nav .prev {
    position: absolute;
    height: 2rem;
    width: 2rem;
    top: calc(50% - 1rem);
    stroke:  #a89a54;
    z-index: 10;
    cursor: pointer;
}
.slider .nav .next {
    right: 4rem;
    transform: scale(2) rotate(180deg);
}
.slider .nav .prev {
    left: 4rem;
    transform: scale(2) ;
    cursor: pointer;
}
.slider .item:not(.is-active) {
    opacity: 0;
    pointer-events: none;
}