Amphtml: amp-carousel styles is overriding my styles

[HelaGone]

What's the issue?

The styles that were added to the amp-component 13 days ago are overriding my styles and therefore messing up my entire layout.

here is the link to the commit

Briefly describe the bug.
When using amp-carousel with type carousel the image takes the entire width of the carousel no matter if I gave it a defined width by adding styles to the slides by its class .amp-carousel-slide as shown in the documentation.

The problem is on the line 30 on the file extensions/amp-carousel/0.2/amp-carousel.css wich introduces a width:100%!important;.

This commit 85b486ea4083978ec74313693c7ce04956a845c7 is where the bug was introduced.

How do we reproduce the issue?

1. Visit my site at https://codigoespagueti.com/ and scroll down to RESEÑAS section and inspect one of the slides (amp-scrollable-carousel-slide) on the amp-carousel
2. Go to the computed tab in dev tools and search for width
3. click on the little arrow next to the width in pixels (1280px). This action shold take you to the actual class that is setting the width for each slide on the carousel.
4. Turn off the width declaration by pressing the little check mark and see how the slides on the carousel takes the specified width declared by my styles.

Please provide a public URL and ideally a reduced test case (e.g. on jsbin.com) that exhibits only your issue and nothing else. Provide step-by-step instructions for reproducing the issue:

https://codigoespagueti.com/

1. Visit my site at https://codigoespagueti.com/ and scroll down to RESEÑAS section and inspect one of the slides (amp-scrollable-carousel-slide) on the amp-carousel
2. Go to the computed tab in dev tools and search for width
3. click on the little arrow next to the width in pixels (1280px). This action shold take you to the actual class that is setting the width for each slide on the carrousel.
4. Turn off the width declaration by pressing the little check mark and see how the slides on the carousel takes the specified width declared by my styles.

What browsers are affected?

All of them and all devices

Which AMP version is affected?

0.2

Is this a new issue? Or was it always broken? Paste the version of AMP where you saw this issue. (You can find the version printed in your browser's console.)

The issue started today, not only in this site bus in several of my websites

[dritter]

We have the same issue. Here is a reproducer in the amp playground.
This happens with the amp-carousel 0.2, but not with 0.1. The affected AMP-Version is 2011252111001.

We found a workaround by using max-width.

[HelaGone]

Thanks I'll try that. But it feels like that width at 100% is wrong. Idunno..

[betosg]

Hi guys, I've seen that the issue is closed but i'm still having this problem using amp-carousel 0.2...

[dritter]

@betosg The Cherry-Pick is still in process. See https://github.com/ampproject/amphtml/issues/31516

[micajuine-ho]

Thanks for your patience everyone. The CP got approved and we are cutting a new release now.

EDIT: Cherry-pick is live!