How do I make 'Sold Out' larger on mobile product page?

Site URL: https://sundogbread.com/preorder

Hi! I'm hoping someone will help me with a css code for my mobile site with the motto template. I am trying to make the sold out text/icon larger on my mobile page. 

This is what it currently looks like:

I'm would like the sold out icon to look something like this:

I don't see Sold out product on above link. Can you share link to exact page?

The exact page is https://sundogbread.com/preorder. It's a working site and all items are showing in stock at the moment. I made a different product sold out at the bottom of the page to use for an example.

I'm not sure if  you can help with this one, but one complaint we received about the site is that when you click to view a category all items show in stock, even though it is out of stock for that particular category. I know it is because the item is in stock for the other categories and it only displays the 'sold out' icon when it is out of stock for all categories. Customer's would like the  'out of stock' icon to appear over products after clicking on their selected category (day of the week). That way they can see it it out of stock for that particular category (day) before trying to add it to their cart. 

Thank you for all your help!

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.product-mark.sold-out {
    font-size: 30px;
}
}

Thank you! That works perfectly!