Custom CSS list-item-content_text-wrapper can't get title and desc. to be responsive

First post here in the forum. 🙂

I've been working on a simple list to add some fun to the items (min-width:640px desktop only) - with rotate, disolve and such, to give some pizzaz. What I can't seem to do is to get the containing div that hold the title and description to be responsive in the same way as the list-item media image. 

When I resize the viewport, the container for title and description shrinks at a greater rate than the list-item media image until it's only 0 pixels wide - which distributes the entire text down to a über-tall list of letters. I want to lock the font-size to the size of the media image if possible, but can't using CSS style names - or I can't 'see' the class properties that I need to target for width and padding etc. 

page is:

https://www.emedical-technology.com/products-services

Code is: 

@media only screen and(min-width:640px){ .list-item-content {      
  transform:rotateY(180deg);   
  transition: all 1s;   
  margin-top:-100%; 
  padding-bottom:30%!important;   
  padding:7rem;   
  opacity:0;
  } 
  
  .list-item:hover  .list-item-content {   transition: all 1s;               transform:rotateY(0deg);   
    opacity:1;  }  
  .list-item-media img{   transform:rotateY(0deg);   transition: all 1s;} 
  .list-item:hover  .list-item-media img{   transition: all 1s;   transform:rotateY(180deg);   
    opacity:0  }  
  .list-item:hover  .list-item-media{     transition: all 1s;     transform:rotateY(180deg);     background-color: #CBDCF7;
  }
   .list-item-content__description p {
    padding:1rem;
  }
  .preFade {
    padding: 1vw;
  }
}

I've targed the following classes: 

.list-item-content__text-wrapper

.list-item-content__description

.list-item-media-inner.preSlide.slideIn

Thanks!

You want to make text always inside the box, not overflow?