Div elements mistake - html

Question

I made 3 div elements name cont1 cont2 and cont3 all of them have their own paragraph and header inside, I made something like animation so whoever hovers one of those conts box-shadow gets higher and the scale of div increases but the problem is that if display is inherit and someone for example hovers first div other 2 divs which are down also move
#main div {
display: inherit;
position: relative;
}
#main div button {
margin-top: 120px;
width: 140px;
height: 70px;
background: #49587a;
border: none;
border-radius: 15px;
box-shadow: 2px 4px #2d3342;
transition: 0.2s;
font-weight: 600;
font-size: 1.2rem;
color: #e4f9e0;
cursor: pointer;
}
#cont1,
#cont2,
#cont3 {
width: 290px;
height: 600px;
background: rgb(30, 33, 33, 0.85);
margin-top: 15vh;
margin-left: 10vw;
border-radius: 25px;
transition: 0.35s;
color: white;
text-align: center;
box-shadow: 5px 10px #0c0921;
}
#cont1:hover,
#cont2:hover,
#cont3:hover,
#cont4:hover {
transform: scale(1.05);
height: 620px;
box-shadow: 15px 20px #0c0921;
}
<div id="main">
<div id="cont1">
<h1>Basic</h1>
<p>Buy <span>Basic</span> packet and get:</p>
<p>300 Minutes Talk</p>
<p>500 SMS</p>
<p>5GB NET More info</p>
<button>Buy Now !</button>
</div>
<div id="cont2">
<h1>Premium</h1>
<p>Buy <span>Basic</span> packet and get:</p>
<p><span>1000</span> Minutes Talk</p>
<p>500 SMS</p>
<p>12GB NET</p>
<button>Buy Now !</button>
</div>
<div id="cont3">
<h1>Pro</h1>
<p>Buy <span>Basic</span> packet and get:</p>
<p><span style="">ULIMITED</span> Minutes Talk</p>
<p><span>UNLIMITED</span> SMS</p>
<p>25GB NET</p>
<button>Buy Now !</button>
</div>
<div id="asd">
<p>Lorem Ipsum</p>
</div>
<input>asd
<button id="btn">add</button>
</div>

Answer 1

Just Remove:
#cont1:hover,#cont2:hover,#cont3:hover,#cont4:hover,{
height: 620px;
}
Codepen (removed line is line 42)