Product Page Layout Issue

I realized the issue with product image being overflowed is being caused due to this CSS.

/*CSS to correct CLS issue on product page start*/
/* https://wordpress.org/support/topic/cumulative-layout-shift-cls-issue-on-product-pages/ */
/*For Desktop*/
@media screen and (min-width: 922px) {
	.woocommerce-product-gallery {
	  min-height: 600px;
          max-height: 600px;
 }
}
/*For Mobile*/
@media screen and (max-width: 921px) {
 .woocommerce-product-gallery > .flex-control-nav li {
	height: calc(25vw - 1.5em) !important;
 }
}
@media screen and (max-width: 500px) {
	.woocommerce-product-gallery {
	max-height: calc((25vw - 1.5em) + (100vw - 56px) + 1em);
 }
}
@media screen and (min-width: 545px) and (max-width: 921px) {
	.woocommerce-product-gallery {
	max-height: calc((25vw - 1.5em) + (100vw - 117px) + 1em);
 }
}
/* CSS to correct CLS issue on product page ends */

I got this css from this page and it did fix CLS issue on both astra and generatepress but on generatepress it seems to be causing issue when images are not square.
https://wordpress.org/support/topic/cumulative-layout-shift-cls-issue-on-product-pages/

Maybe you can help me optimize this css?

the page you shared has 0 CLS and if you test my page it has a CLS of 0.5

I have removed that css and the website is using default product gallery like in your link here.

https://gpsites.co/seller/product/happy-ninja/

could you tell me what is causing the CLS in my case? Because if you are getting a CLS of 0 I should be getting it too.

only thing I have done here is added this CSS to reposition thumbnails and added a scroll on them. But that CSS i received from generate press CSS in a different support thread.

/* arrange thumbnail images on product page - starts */

/* VERSION 1 - Vertical Scrolling Thumbnails for Desktop */

/* https://generatepress.com/forums/topic/woo-single-product-thumbnail-gallery-with-carousel/#post-599314 */

.woocommerce div.product div.images .flex-control-thumbs li {
    padding: 5px 5px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .woocommerce-page div.product div.images {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-item-align: center;
        align-self: center;
    }
    .woocommerce div.product div.images .flex-control-thumbs {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 80px;
        flex: 1 0 80px;
        /* Adjust PX to suit width of thumbnails */
        max-height: 425px;
        /* Adjust Height to Image height on desktop */
        overflow: auto;
    }
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 100%;
        padding: 0 10px 10px 0;
    }
}

/* VERSION 2 - Horizontal Scrolling Thumbnails for mobile */

@media (max-width: 768px) {

.woocommerce div.product div.images .flex-control-thumbs li {
    padding: 5px 5px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 25%;
    flex: 1 0 25%;
}

.woocommerce div.product div.images .flex-control-thumbs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: auto;
}
}

/* add border on thumbnail images product page */
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
    border: 2px solid black;
}