Gibson BEM

New css styling BEM for Gibson responsive build

by will525

HTML

<div class="product" itemscope itemtype="http://schema.org/Product">
            <img src="http://www.racinggreen.co.uk/upload/siteimages/Product/0035391_250_A.jpg" class="product__image" />
            <h2 class="product__title" itemprop="name">Cardinal</h2>
        <div class="product__description">
            <p>SHORT SLEEVE END-ON-END<br />
                BUTTON DOWN WITH<br />
             TWO POCKET</p>
        </div>
        <div class="product__price" itemprop="price">
            <span>£80</span>
        </div>
    </div>

CSS

.product {
    width:100%;
    max-width:232px;
    float:left;
    cursor:pointer;
    text-align: center;
    text-transform:uppercase;
    font-family:Arial;
    color:#424342;
}
.product:hover {background:#f7f6f3;}

.product__image {width:95%;margin:0 auto;padding:10px 0;}
.product__title {font-weight:bold;font-size:1.250em; margin:2px auto;border-bottom: 1px solid #d5112b;display: inline;}
.product__description p {color:#474242;font-size:0.750em;}
.product__price  {font-weight:bold;font-size:1.250em;margin:5px 0;padding:10px;}