How to maintain border radius with image zoom animation

Store Design
,
1

I have a collection list at the top of my homepage, which has a border radius. When you hover the card, it does a zoom animation on the card image. When it zooms, the border radius is ignored and it becomes square (shown in the video link below). I want the zoom to maintain the border radius.

Video of the issue

My Shopify site

Thanks for your time!

2

Please add below css code at bottom of assets/base.css file

#shopify-section-template–18239785533749__bb323e38-6b57-495e-a096-da2b2771855e * {
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}

Thank you.