Padding Values on images won't work in media quarries, and how to scale images without interrupting content besides it?

  .gazelle,
  .map,
  .hotel {
    width: 40%;
    height: 40%;
    border: solid 2.5px grey;
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
  }

So I tried to add borders with small amounts of padding around those 3 images, but for some reason it only applies padding to the top and left sides of the photos. I tried the shorthand property first, didn't work, then I tried it the longer way as shown above, still same unwanted results.

Also, I wanted to scale the images down so I scaled with width and height to 40%, then floated them. But they appear too small in mobile viewport width and height, and they appear too big in wider viewports, it's like they ignore all the margin and padding values I set so that there is some seperation between the photos and the content beside it. They don't honor the space besides them. How do I fix all this? Please take a look at my code through this fork method, thank you: (https://w.trhou.se/kjqoqodyvb)