Social Proof Section - Semantic HTML, Fluid Type, Flexbox, CUBE CSS

I learned a bit about figure, blockquote and figcaption with this project, and attempted to use them semantically; there seems to be varying thoughts on best-practice but I think this implementation is ok.

I had a little difficulty with aligning the text in some of the elements (.ratings and .testimonial figcaption's) as the font baseline seems to be a little too high; centering the text vertically using flex align-items center seemed to not look right visually. I researched the @font-face ascent-override property to solve this but it does not yet have full browser support. Instead I decided to use a helper class to achieve this - it is added to an html element when needed, then using the --ascent-override variable it can be adjusted via the respective block / component if necessary.

/* ascent-override does not work in safari, so apply as a class to adjust line-box position */
.text\:ascent-override {
    position: relative;
    bottom: var(--ascent-override, 0);
}