/*OVERARCHING IMAGE WITH OVERLAY CSS*/
    .image-component .text-box {
      bottom: 0px !important;
         position: absolute;
         padding: 5%;
         display: inline-block;
         width: 100%;
         text-align: center;
         font-size: 30px;
         font-weight: bold;}
  
    .image-component .text-box.light {
      border: 0;
      background: #5c5d61;
      color: #fff;
      background: linear-gradient(360deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.75) 75%,transparent) !important;}
  
   /*TABLET*/ 
      @media screen and (max-width: 992px) {
    .image-component .text-box {
      bottom: 0px;
         position: absolute;
         padding: 5%;
         display: inline-block;
         width: 100%;
         text-align: center;
         font-size: 16px;
         font-weight: bold;}
      }
  
  
  /*MOBILE*/  
    @media screen and (max-width: 766px) {
    .image-component .text-box {
      bottom: 0px;
         position: absolute;
         padding: 5%;
         display: inline-block;
         width: 100%;
         text-align: center;
         font-size: 32px;
         font-weight: bold;}
      }