img {
    max-width: 100%;
    height: auto;
}
.card-container {
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
    z-index: 4;
}
.card-image {
    max-height: 300px;
    height: auto;
    filter: brightness(20%);
    transition: all .3s ease;
}
.card-image:hover{
    transform: translateZ(150px);
    filter: brightness(100%);
}
.card-image:hover + * {
    transform: translateZ(80px) rotateY(40deg);
    filter: brightness(80%);
}
.card-image:hover + * + * {
    transform: translateZ(40px) rotateY(20deg);
    filter: brightness(40%);
}
.card-image:has( + .card-image:hover){
    transform: translateZ(80px) rotateY(-40deg);
    filter: brightness(80%);
}
.card-image:has(+ * + .card-image:hover){
    transform: translateZ(40px) rotateY(-20deg);
    filter: brightness(40%);
}

/* Test  */

.checked-bg {
    left: 20px; 
    right: 20px;
    background-image: url(checkered-bg-design.svg);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    pointer-events: none;
    z-index: 2;
}

.torch-block {
    background-color: #9EF501;
    left: 0;top: 0;
    height: 267px;
    width: 267px;
    border-radius: 50%;
    filter: blur(100px);
    -webkit-filter: blur(100px);
    pointer-events: none;
    z-index: 1;
    will-change: transform;
    transition: transform .8s ease-out;
}
.title-outer .title-char {
    display: inline-block;
    color: #003d324d;
}
.title-inner .title-char {
    display: inline-block;
    color: #003d32;
    opacity: 0;
    transform: scale(1.3);
}

.test-case {
    position: sticky;
    position: -webkit-sticky;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background-color: #9EF501;
}

.test-case-2 {
    background-color: chocolate;
    z-index: 1;
}

.test-case-img {
    width: 500px;
    /* clip-path: inset(100% 25% 0%); */
}