Portfolio-text as pill shaped tags

Hi SS Forums,

I'm having trouble locating any online documentation for customization of portfolio-text (captions) beyond just basic text styling.

My goal is to create a pill-shaped box (similar to one of my button styles - not pictured), around the portfolio-text on my portfolio thumbnails, seen below in the screenshot.

Can you share your website URL and this page. What style do you want the background pills? Color?

Apologies, I put the URL in the form when posting.

I prefer a completely rounded pill, not a round-corner rectangle. The corner radius is 8px or 16px, cant recall off the top of my head.

www.grahamcerceo.com

Would also like to add a translucent/blur fill to them.

We can start with this Custom CSS:

.portfolio-grid-overlay .grid-item .portfolio-text .portfolio-title {
  padding: 6px 12px;
  background: rgba(255,255,255,0.6);
  border-radius: 16px;
  backdrop-filter: blur(20px);
}

Love it. Thank you. In my own coding, I was missing the other containers above the lowest level.

Now to tweak. What other tag can I use to make the pill wrap to the varied length of the caption for each of my portfolio thumbnails? And, expand it to be a little taller. 

Follow up, to ensure it scales appropriately for mobile. Assuming I'll need the min-max screen size tags, right?

Update– I'm playing around with the padding for the desired size of the shape.

What tag would allow for the shape to scale with different lengths of the captions? And, scale for mobile screen size?