* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Barlow Semi Condensed';
display: flex;
justify-content: center;  
align-items: center;   
height: 100vh;
background-color: hsl(214, 17%, 92%);
}


.testimonials-grid {
display:grid;  
grid-template-columns:  repeat(4, 1fr);  
gap:30px;
grid-template-rows: auto auto;
width: 90%;        
margin: auto;
}

.testimonial {
border-radius: 10px;
box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
padding:30px; ;

}

.testimonial-1 {
background-color: hsl(263, 55%, 52%);
color: white;
grid-column:1/3;
grid-row: 1;
position: relative;
    
}

.testimonial-2 {
background-color: hsl(217, 19%, 35%);
color: white;
grid-column:3/4;
   
}

.testimonial-3 {
background-color: hsl(0, 0%, 100%);
color: white;
grid-area:1/ 4 /3/5 ;

}
.testimonial-4 {
background-color: hsl(0, 0%, 100%);
color: white;
grid-column:1/2;
 
}
.testimonial-5 {
background-color: hsl(219, 29%, 14%);
color: white;
grid-column:2/4;
    
}
.user-info{
display: flex;
align-items: center;
gap:20px;
padding: 0 10px 7px;
}

.testimonial-1 .user-info img, .testimonial-5 .user-info img{
border-radius: 50%;
border:2px solid hsl(264, 82%, 80%);
width:45px;
display:inline;

}
.testimonial-2 .user-info img{
border-radius: 50%;
border:2px solid hsl(0, 0%, 81%);
width:45px;
display:inline;

}
.testimonial-3 .user-info img, .testimonial-4 .user-info img{
border-radius: 50%;
border:2px solid hsl(0, 0%, 81%);
width:45px;
display:inline;

}
.user-details h4{
color:hsl(0, 0%, 100%);
font-size:13px;
font-family: 'Barlow Semi Condensed';
font-weight:500;
z-index: 2 ;
}

.user-details p{
color:hsl(0, 0%, 100%);
font-size:13px;
  
}
.testimonial-3 .user-details p, .testimonial-4 .user-details p{
color:hsl(219, 29%, 14%);
font-size:13px;
  
}
.testimonial-3 .user-details h4, .testimonial-4 .user-details h4{
color:hsl(219, 29%, 14%);
font-size:13px;
font-family: 'Barlow Semi Condensed';
font-weight:500;
z-index: 2 ;
}

.quotation img{
position: absolute;
filter: brightness(1.1);   
z-index: 1;
top:0px;
right: 70px;
width:  120px;
    
}
.testimonial-highlight{
color:hsl(0, 0%, 100%);
font-size:20x;
font-weight:600;
padding: 5px 10px 10px 10px;
position: relative;  
z-index: 2;
}
.testimonial-1 .testimonial-quote{
color:hsl(260, 100%, 95%);
font-size:16px;
padding: 10px;
}

.testimonial-2 .testimonial-quote, .testimonial-5 .testimonial-quote{
color:hsl(214, 17%, 92%);
font-size:16px;
padding: 10px;
}

.testimonial-3 .testimonial-quote, .testimonial-4 .testimonial-quote{
color:hsl(219, 29%, 14%);
font-size:16px;
padding: 10px;
}

.testimonial-3 .testimonial-highlight, .testimonial-4 .testimonial-highlight {
color:hsl(219, 29%, 14%);
font-size:20x;
font-weight:500;
padding: 5px 10px 10px 10px;
position: relative;  
z-index: 2;
}

.testimonial, .testimonials-grid {
overflow: visible !important;
}


/* Mobile */
@media (min-width: 200px) and (max-width: 1439px) {
 body {
        padding:  50px 10px ; 
      }
.testimonials-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto; 
        height: auto; 
        min-height: auto;  
     }

.quotation{
        display: none;
    }
    
.testimonial {
        grid-column: 1;
        grid-row: auto;
        height: auto; 
        min-height: auto;
        box-shadow: 8px 8px 30px rgba(0,0,0,0.3); 
    }
.testimonial-3{
       margin-bottom: 50px;
    }
}