faq accordion

The reason this happens is that the illustration shadow is the background image of the container with the class header-images, when the height of the container increases, the background image remains fixed at the top because the value you set for background-position-y in the desktop design is -40px, you are using absolute units (pixels). One option you have to fix it without restructuring your whole design is by using relative units like percentages instead:

.header-images {
  background-position-y: 20%; /* Same value you are using for the `top` property of the illustration */
}

This way, every time the container size changes CSS will recalculate where the background should be positioned relative to the new size.

Another option you have is to restructure your design and try to position the illustration and the shadow in a way they don't get affected when the container height changes.

Good luck!

PS: I like the dropdown transition, expanding feels smoother that way 👍.