.grad_content{
  display: grid;
  grid-template-columns: repeat(4, 25%);
  gap: 5px;
  justify-content: center;
} 


.style_bar_service{
  background-color: black;
  padding: 15px;
  height:fit-content;
}

.image_style{
  width: 100%;
  height: auto;

}
.title{
color: #FFC107;
margin: 7px 0px;
}
.readmore{
    color: gray;
    cursor: pointer;
}
.details{
color: white;
}

@media only screen and (max-width: 480px) {
  .grad_content{  
      grid-template-columns: repeat(1,97%);
      margin: 4px;
    
  }


}

@media only screen and (min-width: 480px) {
  .grad_content{  
      grid-template-columns: repeat(2,49%);
    
  }

}


@media only screen and (min-width: 800px) {
  .grad_content{  
      grid-template-columns: repeat(3,32%);
    
  }

}

@media only screen and (min-width: 992px) {
  .grad_content{
      grid-template-columns: repeat(4,24%);
  
  }
}