<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>

    #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;}
    }