I am using the Quarto revealjs presentation format. I am using .r-stack to stack a bunch of images on top of each other as so:

---
format: revealjs
---


## My slide

:::{.r-stack}

:::{.fragment .fade-in-then-out style="text-align: center"}
**Image 1 title**

![](https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg){width="30%"}
:::

:::{.fragment .fade-in style="text-align: center"}
**Image 2 title**

![](https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg){width="50%"}
:::

:::

By default .r-stack appears to center the images vertically one on top of the other. I would like instead to have them all aligned at the top, but have been unable to figure out how to do so. I have tried things like :::{.r-stack style="align-items: flex-start;"} or :::{.r-stack style="vertical-align: top;"}, but nothing seems to work.

Does anyone know how to vertically (and horizontally) align items in an .r-stack?