Responsive FAQ Card - Flexbox, CSS Grid, SASS, JS

Hello everyone, I'm really looking forward to this one, as I struggled quite a bit with positioning and alignment.

1. How did you get the arrows to align perfectly to the right of the text? I used justify-content: flex-end; to no avail.

2. Were you able to perform it with just CSS, if so, how?

3. If you used JS, how'd you get the styles to remain stable during the animations?

4. How did you align the main image for mobile and desktop? For the desktop style, how'd you get the box image to position off the side of the card, while the main image was overflowed?

5. How'd you style the after effect of the image with the darkened color? I attempted to use ::after, and that failed.

Any help is appreciated, thanks!