/* CSS Document */

:root{
    --gap:3px;
    --gapTop:0px;
    --gapBottom:30px;
}
    
body{
    font-family:sans-serif;
    font-size:15px;
    line-height:1.5em;
    color:#333;
}
#item-wrapper{
    width:100%;
    display:flex;
    align-items:stretch;
    flex-wrap:wrap;
    justify-content: center;
}

.item, .blank_item{
    box-sizing:border-box;
    margin-top:var(--gapTop);
    margin-bottom:var(--gapBottom);
    margin-left:var(--gap);
    margin-right:var(--gap);
    
    /* calculating item width based on gap value */
    width:calc(100% / 3 - (var(--gap) * 2));
    
    min-width:300px;
    background:#f8f8f8;

    display:flex;
    flex-direction:column;

    position:relative;
}

.blank_item{
	background:none;
}

.image{
    box-sizing:border-box;
    width:100%;
    padding-bottom:50%;
    background:gray;
}

.content{
    box-sizing:border-box;
    padding:20px 20px 70px 20px;
}

.buttons{
    box-sizing:border-box;
    background:#555;
    width:100%;
    height:40px;
    position:absolute;
    bottom:0px;
    text-align:center;
    color:white;
    padding:10px
}