.carousel {
    position: relative;
    z-index: 1;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    background-image: url(img/Anteiku2.webp);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    line-height: 1.3;
	overflow: hidden;
}
.carousel-item {
    --width: clamp(150px, 30vw, 300px);
    --height: clamp(200px, 40vw, 400px);
    --x: calc(var(--active) * 80% * var(--items));
    --y: calc(var(--active) * 20% * var(--items));
    --rot: calc(var(--active) * 120deg);
    --opacity: calc(var(--zIndex) / var(--items) * 3 - 2);
    overflow: hidden;
    position: absolute;
    z-index: var(--zIndex);
    width: var(--width);
    height: var(--height);
    margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
    border-radius: 10px;
    top: 50%;
    left: 50%;
    user-select: none;
    transform-origin: 0% 100%;
    box-shadow: 0 10px 50px 10px rgba(0, 0, 0, 0.5);
    background: black;
    pointer-events: all;
    transform: translate(var(--x), var(--y)) rotate(var(--rot));
    transition: transform 0.8s cubic-bezier(0, 0.02, 0, 1);
}
.carousel-item .carousel-box {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
    opacity: var(--opacity);
    font-family: 'Roboto', sans-serif;
}
.carousel-item .carousel-box:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5));
}
.carousel-item .carousel-title {
	display: flex;
	flex-direction: column;
    position: absolute;
    z-index: 1;
	font-family: Oswald;
    color: #ffae01;
    bottom: 18px;
    right: 10px;
    transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
    /* font-size: clamp(16px, 3vw, 20px); */
	font-size: 18px;
    text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7); 
}
.img_cl_tl{
	width: 120px;
}
.carousel-item .num {
    position: absolute;
    z-index: 1;
    color: #BFE2FF;
    top: 10px;
    left: 20px;
    transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
    font-size: clamp(20px, 10vw, 40px);
    font-weight: bold;
    text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7); 
}
.item_cl {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
@media (max-width: 768px)
{
.carousel-item .carousel-title {
	font-size: 14px;
}
.img_cl_tl{
	width: 80px;
}
.carousel-item {
    --width: clamp(200px, 30vw, 300px);
    --height: clamp(300px, 40vw, 400px);
}
}

@media (min-width: 1600px)
{
.carousel-item .carousel-title {
	font-size: 18px;
}
.img_cl_tl{
	width: 120px;
}
.carousel-item {
    --width: clamp(200px, 30vw, 500px);
    --height: clamp(300px, 40vw, 600px);
}
}