.pxl-image-box1 {
    .pxl-inner-image {
        display: flex;
        overflow: hidden;
        position: relative;
        clip-path: polygon(27.7% 0, 100% 0, 100% 48.64%, 72.3% 100%, 0 100%, 0 51.46%);
        border-radius: 0 40px;

        .pxl-box-inner {
            width: 400px;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;

            &.pxl-box-inner0 {
                width: 41.4%;
                z-index: 3;

                .img-counter {
                    width: 1400px;
                    height: 1400px;
                    bottom: -9.5%;
                    right: 0;

                    @media #{$max-lg} {
                        width: 1200px;
                        height: 1200px;
                    }

                    @media #{$max-md2} {
                        width: 800px;
                        height: 800px;
                    }

                    img {
                        border: 8px solid #fff;
                    }
                }
            }

            &.pxl-box-inner1 {
                width: 76.91%;
                z-index: 2;

                .img-counter {
                    width: 1523px;
                    height: 1523px;
                    bottom: -18.3%;
                    right: 0;

                    @media #{$max-lg} {
                        width: 1123px;
                        height: 1123px;
                        bottom: -9.3%;
                    }

                    @media #{$max-md2} {
                        width: 900px;
                        height: 900px;
                    }

                    img {
                        border: 8px solid #fff;
                    }

                }
            }

            &.pxl-box-inner2 {
                width: 100%;
                z-index: 1;

                .img-counter {
                    width: 1516px;
                    height: 816px;
                    bottom: 0;
                    right: 0;

                    @media #{$max-lg} {
                        width: 1162px;
                        height: 600px;
                    }

                    @media #{$max-md2} {
                        width: 986px;
                        height: 450px;
                    }

                    img {
                        border: unset;
                        border-radius: 0;
                    }

                }
            }

            .img-counter {
                position: absolute;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 100%;
                }
            }
        }
    }
}

.pxl-image-box2 {
    .pxl-box-inner {
        position: relative;
        width: 644px;
        height: 644px;
    }

    .pxl-box-inner .img-counter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transform: rotate(0deg);
        object-fit: cover;
        z-index: 0;
        &:first-child{
            opacity: 1;
            z-index: 1;
        }
        img{
            object-fit: cover;
        }
      }
      
      .pxl-box-inner .img-counter.active {
        z-index: 1;
      }
      
}