.banner{ position: relative; background: #e8e9e3; overflow: hidden;}
.banner .caption{position: absolute; left: 16px; 
      z-index: 1; max-width: 470px;}
.banner .caption.top{top: 16px;}      
.banner .caption.bottom{bottom: 0;}      
.banner .caption .title{font-size: clamp(1.5rem, 2.5vw, 2rem);} 
.banner .caption p{font-size: 14px} 

.services{border-radius: 10px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 10px;}
.services figcaption{padding: 30px 30px 10px 30px;}
.services .sub-title{font-size: 20px;}
.services p{line-height: 26px;}
.services:hover{box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 20px;}


.painter{max-width: 370px;}
.brush{max-width: 260px; margin-right: -120px;}

@media(min-width:768px){
     .banner{  max-height: 440px;}
     .banner .caption.top{ left: 10%; top:50%; bottom: inherit; transform:translateY(-50%);}
     .banner .caption .title{font-size: clamp(1.1rem, 2.5vw, 2rem);} 
     .banner .caption p{font-size: 16px} 
}