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

:root {
    --index: calc(1vw + 1vh);
    --transition: cubic-bezier(.1, .7, 0, 1); 
}

body {
    background-color: rgb(14, 14, 14);
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.items {
    display: flex;
    gap: .4rem;
    perspective: calc(var(--index) * 35); 
}

.item {
    width: calc(var(--index) * 3);
    height: calc(var(--index) * 12);
    background-color: #222;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    filter: grayscale() brightness(.5);
    transition: transform 1.25s var(--transition), filter 3s var(--transition), width 1.25s var(--transition);
    will-change: transform, filter;
}

.item::before, .item::after { 
    content: '';
    position: absolute;
    height: 100%;
    width: 20px;
    right: calc(var(--index) * -0.7);
}

.item::after {
    left: calc(var(--index) * -0.7);
}

.items .item:hover { 
    filter: inherit; 
    transform: translateZ(calc(var(--index) * 10));
} 

.items .item:hover + * { 
    filter: inherit; 
    transform: translateZ(calc(var(--index) * 8.5)) rotateY(35deg);
    z-index: -1;
} 

.items .item:hover  + *  + *{ 
    filter: inherit; 
    transform: translateZ(calc(var(--index) * 5.6)) rotateY(40deg); 
    z-index: -2;
} 

.items .item:hover  + *  + * + *{ 
    filter: inherit; 
    transform: translateZ(calc(var(--index) * 2.4)) rotateY(30deg); 
    z-index: -3;
} 

.items .item:hover  + *  + * + * + *{ 
    filter: inherit; 
    transform: translateZ(calc(var(--index) * .6)) rotateY(14deg); 
    z-index: -4;
} 

.items .item:has( + :hover) { 
    filter: inherit; 
    transform: translateZ(calc(var(--index) * 8.5)) rotateY(-35deg); 
} 

.items .item:has( + * + :hover) { 
    filter: inherit; 
    transform: translateZ(calc(var(--index) * 5.6)) rotateY(-40deg); 
} 

.items .item:has( + * + * + :hover) {
    filter: inherit; 
    transform: translateZ(calc(var(--index) * 2.4)) rotateY(-30deg); 
} 

.items .item:has( + * + * + * + :hover) { 
    filter: inherit; 
    transform: translateZ(calc(var(--index) * .6)) rotateY(-14deg); 
} 

.items .item:active, .items .item:focus {
    width: 28vw;
    filter: inherit;
    z-index: 100;
    transform: translateZ(calc(var(--index) * 10));
    margin: 0 .45vw;
}