How to add animation from desktop to MOBILE

Store Design
, , , , , , , , , ,
1

Hey guys, I have an issue with the animation for collapsible content. I’ve added a smooth animation for expanding the hidden content, and it works fine on desktop. But how can I get it to work on mobile?

When I view it in the Shopify editor on mobile, the animation is still there, but when I open the store on an actual mobile device, it doesn’t work.

Here’s the code for the animation (I added it to base.css):

.accordion details::details-content {
display: block;
margin-inline: 2rem;
block-size: 0;
overflow: hidden;
transition-property: block-size, content-visibility;
transition-duration: 0.3s;
transition-behavior: allow-discrete;
transition-timing-function: ease-out;
}

.accordion details[open]::details-content {
block-size: auto;
block-size: calc-size(auto, size);
}

And here’s my store URL: https://1049xn-ya.myshopify.com/products/editing-masterclass

(Just scroll all the way down; the collapsible content is there.)

Thanks a lot, I appreciate any help!
Tim