HTML
<section id="coffee" class="relative padding-20 border-box">
<div class="heading text-center center">
<h1>BEST COFFEE</h1>
<div class="separator"></div>
<h3>Finest beans grown with forehead and carefully processed for you. Enjoy our special selection that will pamper your senses.</h3>
</div>
<div class="row clear">
<div class="column-4 item padding-10">
<div class="column-4 contain middle"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/mockup-graphics-Ae6BaCsQZeg-unsplash.jpg"></div>
<div class="column-8 text-center padding-10">
<h1>Mokka</h1>
<div class="separator"></div>
<div class="item-text">Awakening and delight gathered in a small glass</div>
<button class="button">Read More</button>
</div>
</div>
<div class="column-4 item padding-10">
<div class="column-4 contain middle"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/mockup-graphics-Ae6BaCsQZeg-unsplash.jpg"></div>
<div class="column-8 text-center padding-10">
<h1>Mokka</h1>
<div class="separator"></div>
<div class="item-text">Awakening and delight gathered in a small glass</div>
<button class="button">Read More</button>
</div>
</div>
<div class="column-4 item padding-10">
<div class="column-4 contain middle"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/mockup-graphics-Ae6BaCsQZeg-unsplash.jpg"></div>
<div class="column-8 text-center padding-10">
<h1>Mokka</h1>
<div class="separator"></div>
<div class="item-text">Awakening and delight gathered in a small glass</div>
<button class="button">Read More</button>
</div>
</div>
</div>
<div class="row clear">
<div class="column-4 item padding-10">
<div class="column-4 contain middle"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/mockup-graphics-Ae6BaCsQZeg-unsplash.jpg"></div>
<div class="column-8 text-center padding-10">
<h1>Mokka</h1>
<div class="separator"></div>
<div class="item-text">Awakening and delight gathered in a small glass</div>
<button class="button">Read More</button>
</div>
</div>
<div class="column-4 item padding-10">
<div class="column-4 contain middle"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/mockup-graphics-Ae6BaCsQZeg-unsplash.jpg"></div>
<div class="column-8 text-center padding-10">
<h1>Mokka</h1>
<div class="separator"></div>
<div class="item-text">Awakening and delight gathered in a small glass</div>
<button class="button">Read More</button>
</div>
</div>
<div class="column-4 item padding-10">
<div class="column-4 contain middle"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/mockup-graphics-Ae6BaCsQZeg-unsplash.jpg"></div>
<div class="column-8 text-center padding-10">
<h1>Mokka</h1>
<div class="separator"></div>
<div class="item-text">Awakening and delight gathered in a small glass</div>
<button class="button">Read More</button>
</div>
</div>
</div>
</section>
<div class="credit text-center relative">
<div>Created with <a href="https://web.imasmi.com/webcss" target="blank">WebCss</a></div>
<div>Photo by <a href="https://unsplash.com/@mockupgraphics?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mockup Graphics</a> on <a href="https://unsplash.com/s/photos/item?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></div>
</div>
CSS
#coffee .heading{margin-bottom: 50px; width: 60%;}
#coffee .heading h1{font-size: 38px;}
#coffee .heading h3{font-weight: normal; letter-spacing: 1px; font-size: 1em; line-height: 1.7em;}
#coffee .row{border-bottom: 1px solid #863e0c;}
#coffee .row:last-child{border-bottom: unset;}
#coffee .row .item{border-right: 1px solid #863e0c;}
#coffee .row .item:last-child{border-right: unset;}
#coffee .item .image{height: auto; margin-top: 30px;}
#coffee .item-text{margin: 20px auto; letter-spacing: 1px; font-weight: bold; font-size: 0.8em; line-height: 1.4em;}
.separator{background-color: #863e0c; width: 60px; height: 2px; margin: 0 auto;}
.button{background: none; outline: none; color: #863e0c; border: 2px solid #863e0c; padding: 7px 25px; letter-spacing: 1px; font-size: 0.8em; display: table; margin: 20px auto; cursor: pointer; transition: 0.5s;}
.button:hover, .button:active{background-color: #863e0c; color: #ffffff;}
.credit a{color: #863e0c; text-decoration: none;}
@media(max-width: 1080px){
#coffee .row{border-bottom: unset;}
#coffee .row .item{border-right: unset;}
#coffee .item .image{height: 250px;}
}