Image card poster block third font css not working on mobile

I was able to add a 3rd font to my image card poster block,  I changed a line of text to italicized and then inserted this code. This is where I got the original

It looks great on squarespace mobile preview (attached) but the code isn't registering on my actual mobile device ( attached )

What css do I use so it works on all sized devices?

This site is a 7.0 brine template

the website is www.thekitchclub.com   (pw:kitchclub33)

//Image Card Block Third Font//
.sqs-block-image .design-layout-poster em {
  font-family: 'Futura PT';
  font-size: 17px; 
  text-transform: uppercase; 
  letter-spacing: .08em; 
  font-weight: 500; 
  color: #fffff;
  font-style: normal !important;
  line-height: 3em;
  display: block;
}
//*mobile*//
@media screen and (max-width: 641px) {.sqs-block-image .design-layout-poster em {
  font-family: 'Futura PT'!important;
  font-size: 14px; 
  text-transform: uppercase; 
  letter-spacing: .08em; 
  font-weight: 500; 
  color: #fffff;
  font-style: normal !important;
  line-height: 2em;
  margin-top: -20px;
  display: block;
}
}

Hi. You mean title/subtitle color?