Auto-centering text on flip card with scroll function

SITE URL:
https://www.logancenter.uchicago.edu/2023

I have a section with flipping poster cards containing scroll functionality. Everything works fine but I have an aesthetic issue I can't seem to solve. I would like for text to be centered but, when that alignment is set, it centers all text without regard to the beginning of the text. That means any text that overflows the card field gets cut off at top and bottom. So "flex-start" alignment works great for overflow text but doesn't give me the desired centering aesthetic on short text.

See attached image. Below is the code for this section:

---

// Begin Poster Card Flip
.design-layout-poster img{ transition: 1s}
.design-layout-poster:hover img{transform: rotateY(180deg); transition: 1s} 
.image-card-wrapper{transform:rotateY(180deg)!important; opacity:0; transition: 1s;}
.design-layout-poster:hover .image-card-wrapper {opacity:1!important; transform:rotateY(0deg)!important; background: purple; transition: 1s;}
//End Poster Card Flip

// Begin Card Scroll
.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card-wrapper {
  overflow-y: auto !important;
}
.sqs-block-image .design-layout-poster .image-card-wrapper {
  align-items: flex-start !important;
  pointer-events: auto !important;
  padding-top: 1em;
  padding-bottom: 1em;
}
//End Card Scroll

Hi,

What should it look like?

Hi @tuanphan,

Overflow text appearing as it does in the flex-start example in the top row is perfect. However, I want text that doesn't overflow to conform to the command to center on the card, as it does in the February 2023 card in the center example on the bottom row.

The issue I'm having is the code is allowing one or the other. The text can either be centered, which works great for non-overflow text but cuts off overflow text at top & bottom, or I can have overflow text start at the first line of text but it won't center non-overflow text.

Does that make sense?