.services div.item {
    /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 24%;
    margin-bottom: 2%;
    background-color: #146eb4;
    padding-bottom: 1%;
    
}
.services img {
    width: 55%;
    
    background-color: rgb(204, 203, 203);
}
.services .caption {
    /* Make the caption a block so it occupies its own line. */
    
    font-size: 135%;
    text-decoration: underline;
    color: rgb(255, 255, 255);
    
}


@media screen and (max-width: 1000px) {
    .services div.item {
        /* To correctly align image, regardless of content height: */
     
        display: block;
        margin: 10% auto;
        width: 80%;
       
    }

    .services .caption {
        /* Make the caption a block so it occupies its own line. */
        
        font-size: 135%;
      
    }
}

figcaption {
    padding-top: 10px;
    font-size: 20px;
}