Помогите между блоками ставить линии так чтобы было адаптивно
Html
*{
margin: 0px;
padding: 0px;
}
.culture {
text-align: center;
padding: 80px 50px;
background: #F9F9F9;
}
.culture h1 {
font-family: "Montesrrat", sans-serif;
font-size: 40px;
font-weight: bold;
color: #222;
text-transform: uppercase;
}
.culture p {
font-family: "Roboto Slab", serif;
font-size: 20px;
color: #777;
}
.culture .value {
display: inline-block;
width: 33%;
margin-top: 50px;
}
.culture .value .line {
width: 50%;
height: 2px;
background: #787878;
display: inline-block;
vertical-align: middle;
position: relative;
}
.culture .value .linel {
left: -100px;
}
.culture .value .liner {
right: -100px;
}
.culture .value .border {
border: 3px solid #787878;
border-radius: 50%;
display: inline-block;
margin-bottom: 15px;
vertical-align: middle;
}
.culture .value .border img {
padding: 12px;
}
.culture .value h1 {
font-size: 18px;
font-family: "Montesrrat", sans-serif;
font-weight: bold;
color: #222;
}
.culture .value p {
font-size: 14px;
color: #777;
font-weight: "Roboto Slab", serif;
}
<div class="culture">
<h1>culture and values</h1>
<p>Proin iaculis purus consequat cure.</p>
<div class="value">
<div class="border">
<img src="images/val1.png" alt="val1">
</div>
<h1>work-life balance</h1>
<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipitn aenean rhoncus posuere odio in tincidunt.</p>
</div>
<div class="value">
<span class="linel line"></span>
<div class="border">
<img src="images/val2.png" alt="val2">
</div>
<span class="liner line"></span>
<h1>quality over quantity</h1>
<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipitn aenean rhoncus posuere odio in tincidunt.</p>
</div>
<div class="value">
<div class="border">
<img src="images/val3.png" alt="val3">
</div>
<h1>deliver excellence</h1>
<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipitn aenean rhoncus posuere odio in tincidunt.</p>
</div>
</div>
<!-- culture -->