._3d-container {
    width: 22rem;
    height: 18rem;
    position: relative;
}

._3d-block {
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    position: absolute;
    transform: none;
}

._3d-image-item {
    border: 5px solid var(--black);
    border-radius: 1.25rem;
    justify-content: center;
    align-items: center;
    width: 22rem;
    height: 18rem;
    display: flex;
    position: absolute;
    overflow: hidden;
}

._3d-image-item:hover {
    transform: translate(0, -57px);
}

._3d-image-item._7 {
    transform-style: preserve-3d;
    transform: rotateX(0)rotateY(240deg)rotateZ(0)translate3d(0, 0, 34rem);
}

._3d-image-item._2 {
    transform-style: preserve-3d;
    transform: rotateX(0)rotateY(40deg)rotateZ(0)translate3d(0, 0, 34rem);
}

._3d-image-item._9 {
    transform-style: preserve-3d;
    transform: rotateX(0)rotateY(320deg)rotateZ(0)translate3d(0, 0, 34rem);
}

._3d-image-item._4 {
    transform-style: preserve-3d;
    transform: rotateX(0)rotateY(120deg)rotateZ(0)translate3d(0, 0, 34rem);
}

._3d-image-item._8 {
    transform-style: preserve-3d;
    transform: rotateX(0)rotateY(280deg)rotateZ(0)translate3d(0, 0, 34rem);
}

._3d-image-item._5 {
    transform-style: preserve-3d;
    transform: rotateX(0)rotateY(160deg)rotateZ(0)translate3d(0, 0, 34rem);
}

._3d-image-item._3 {
    transform-style: preserve-3d;
    transform: rotateX(0)rotateY(80deg)rotateZ(0)translate3d(0, 0, 34rem);
}

._3d-image-item._1 {
    transform-style: preserve-3d;
    transform: translate3d(0, 0, 34rem);
}

._3d-image-item._6 {
    transform-style: preserve-3d;
    transform: rotateX(0)rotateY(200deg)rotateZ(0)translate3d(0, 0, 34rem);
}

/* Positioning for each item — tweak angles to match Webflow */
._1 {
    transform: rotateY(0deg) translateZ(200px);
}

._2 {
    transform: rotateY(40deg) translateZ(200px);
}

._3 {
    transform: rotateY(80deg) translateZ(200px);
}

._4 {
    transform: rotateY(120deg) translateZ(200px);
}

._5 {
    transform: rotateY(160deg) translateZ(200px);
}

._6 {
    transform: rotateY(200deg) translateZ(200px);
}

._7 {
    transform: rotateY(240deg) translateZ(200px);
}

._8 {
    transform: rotateY(280deg) translateZ(200px);
}

._9 {
    transform: rotateY(320deg) translateZ(200px);
}

/* Ensure images fill their item box */
.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    /* optional */
}

@media screen and (min-width: 1280px) {

    ._3d-container,
    ._3d-wrapper {
        transform: scale(1);
    }
}


@media screen and (min-width: 1440px) {
    ._3d-container {
        transform: scale(1.1);
    }
}

@media screen and (max-width: 991px) {
    ._3d-block {
        transform: none;
    }
}

@media screen and (max-width: 767px) {
    ._3d-image-item {
        border-width: 7px;
    }
}

@media screen and (max-width: 479px) {
    ._3d-container {
        transform: scale(.85);
    }

    ._3d-block {
        transform: translate(0);
    }

    ._3d-image-item {
        border-width: 9px;
        border-radius: 1.5rem;
    }
}