.carousel-wrapper {
    border: 1px solid #cfd3d7;
    border-radius: 40px;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16/9;
    position: relative;
    background-color: #fff
}

.carousel {
    display: flex;
    width: 100%;
    height: 100%;
    transition: all .5s ease
}

.carousel-item {
    flex: 0 0 100%;
    height: 100%;
    opacity: 0;
    transition: all .5s ease;
    position: relative
}

.carousel-item .carousel-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 5
}

.carousel-item .carousel-photo-background {
    object-fit: cover;
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(10px)
}

.carousel-item.active {
    position: relative;
    opacity: 1;
    transform: translateX(0)
}

.carousel-item.old, .carousel-item.new {
    position: absolute;
    opacity: 0;
    transform: translateX(-100%)
}

.carousel-item.new {
    transform: translateX(100%)
}

#previous-item, #next-item {
    position: absolute;
    padding: 32px;
    border: 1px solid #cfd3d7;
    border-radius: 9999px;
    background-color: rgba(250, 250, 250, .5);
    cursor: pointer;
    transition: all .5s ease;
    top: 50%;
    left: 10px;
    transform: translateY(-50%)
}

#previous-item:hover, #next-item:hover {
    background-color: rgba(250, 250, 250, .75);
    border: 1px solid #a8cee3
}

#previous-item:hover::before, #next-item:hover::before {
    border-color: #34bfbd
}

#previous-item::before, #next-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #34bfbd;
    border-left: 2px solid #34bfbd;
    transform: rotate(45deg);
    width: 24px;
    height: 24px;
    top: 30%;
    left: 40%
}

#next-item {
    left: unset;
    right: 10px
}

#next-item::before {
    border-left: none;
    border-right: 2px solid #34bfbd;
    transform: rotate(-45deg);
    left: unset;
    right: 40%
}

@media (max-width: 1279px) {
    .carousel-wrapper {
        height: unset;
        width: 100%
    }
}

@media (max-width: 799px) {
    .carousel-wrapper {
        aspect-ratio: 4/5
    }
}