Two definition of the same item in the same div class - html

Question

I need to use an item, in this case img, in the same div class but with different definitions.
Example:
section .row img {
margin: 0 0 30px;
width: 100%;
border: 4px solid #18a00e;
}
section .row img {
margin: 0 0 30px;
border: 4px solid #18a00e;
max-height: 300px;
}
How can I create and use this two definitions without the last one overwriting the former?
Thank you.
Later edit (for more info):
//this is the html code scenario 1 where I need the width: 100%//
<section class="container">
<div class="row">
<figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/m3.jpg"/>
</figure>
</div>
</section>
//this is the html code for scenario 2, where I need max-height: 300px//
<section class="jumbotron">
<div class="unlockedl">
<div class="row">
<img src="img/pm1.jpg"/>
</div>
</div>
</section>

Answer 1

You have classes that you can use to uniquely target those elements. use .container and .jumbotron to target the .row img in those individual sections instead of the generic section element.
.container .row img {
margin: 0 0 30px;
width: 100%;
border: 4px solid #18a00e;
}
.jumbotron .row img {
margin: 0 0 30px;
border: 4px solid #18a00e;
max-height: 300px;
}
<section class="container">
<div class="row">
<figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/m3.jpg" />
</figure>
</div>
</section>
<section class="jumbotron">
<div class="unlockedl">
<div class="row">
<img src="img/pm1.jpg" />
</div>
</div>
</section>
You can also use other unique classes/elements in those 2 blocks, like figure and .unlockedl
section figure img {
margin: 0 0 30px;
width: 100%;
border: 4px solid #18a00e;
}
section .unlockedl img {
margin: 0 0 30px;
border: 4px solid #18a00e;
max-height: 300px;
}
<section class="container">
<div class="row">
<figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/m3.jpg" />
</figure>
</div>
</section>
<section class="jumbotron">
<div class="unlockedl">
<div class="row">
<img src="img/pm1.jpg" />
</div>
</div>
</section>
Or you can use :nth-child() to target individual sections
section:nth-child(1) .row img {
margin: 0 0 30px;
width: 100%;
border: 4px solid #18a00e;
}
section:nth-child(2) .row img {
margin: 0 0 30px;
border: 4px solid #18a00e;
max-height: 300px;
}
<section class="container">
<div class="row">
<figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/m3.jpg" />
</figure>
</div>
</section>
<section class="jumbotron">
<div class="unlockedl">
<div class="row">
<img src="img/pm1.jpg" />
</div>
</div>
</section>

Answer 2

You should assign an unique id and assign the css to the distinct id
<div id ='id1' class='same_class'> </div>
<div id='id2' class='same_class'> </div>
#id1 {
width: 100%;
}
#id2 {
max-height: 300px;
}
.same_class{
margin: 0 0 30px;
border: 4px solid #18a00e;
}