.services-thumbnails-component {
display: flex;
flex-wrap: wrap;
gap: 30px
}
.services-thumbnails-component .service-item {
width: calc(1/5*100% - (1 - 1/5)*30px);
background: #fff;
text-align: center;
}
.services-thumbnails-component .service-item .image {
width: 100%;
height: 220px;
}
.services-thumbnails-component .service-item .image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.services-thumbnails-component .service-item .content {
padding: 20px;
background-color: #fff;
text-align: center;
position: relative;
} 
.services-thumbnails-component .service-item.has-image .content {
margin: -40px auto 0;
max-width: 80%;
} 
.services-thumbnails-component .service-item .title {
font: 18px/1.21  'urbanist-bold', sans-serif;
color: #1F1F1F;
margin: 0;
} 
.services-thumbnails-component .service-item .subtitle {
color: #656565;
margin: 10px 0 0;
} 
.services-thumbnails-component .service-item .btn {
width: 190px;
max-width: 80%;
min-width: auto;
font-size: 16px;
line-height: 1.2;
padding: 10px 10px;
}
@media only screen and (max-width: 1199px) {
.services-thumbnails-component {
gap: 30px
}
.services-thumbnails-component .service-item {
width: calc(1/3*100% - (1 - 1/3)*30px);
}
.services-thumbnails-component .service-item .title {
font-size: 21px;
} 
.services-thumbnails-component .service-item .content {
padding: 20px;
} 
}
@media only screen and (max-width: 991px) {
.services-thumbnails-component {
gap: 20px
}
.services-thumbnails-component .service-item {
width: calc(1/2*100% - (1 - 1/2)*20px);
}
}
@media only screen and (max-width: 991px) {
.services-thumbnails-component {
gap: 20px
}
.services-thumbnails-component .service-item {
width: 100%;
}
.services-thumbnails-component .service-item .image {
height: 180px;
}
}