How to fix this image inside column and have 20px margin from top, left and right?

I have this row of three columns where I want an image in each column and for this image to take 20px margin from top, left and right. margin-right rule is having no effect on image, margin-left makes it move towards right and overlap the other column.

HTML
<div class="row">
  <div class="column">
  <p class="title">News</p>
  <img src="https://circleyoga.com/wp-content/uploads/2023/12/Gift-Box-v2-500x300-1.jpg" alt="">
</div>

CSS 
.row{
 display: flex;
 max-width: 1060px;
 align-items: center;
 justify-content: center;
 margin: 0 auto;
 margin-top: 30px;
 box-sizing: border-box;
}
.column{
 display: inline-block;
 min-height: 500px;
 width: 33.33%;
 border: 5px solid #F8F8F8;
 box-sizing: border-box;
}

.title{
 font-family: 'Nunito Sans', sans-serif;
 font-size: 30px;
 font-weight: 100;
 border-left-style: solid;
 border-left-width: 5px;
 border-color: #d54126;
 padding-left: 13px;
 margin: 10px 0px;
}

.column img{
 display: block;
 max-width: 100%;
 height: auto;
 margin: 20px 20px 0 20px;
}