Карточка товара 2 Ariel

<section class="t-div-container-card">
    <div class="t-div-ariel">
        <div class="t-div-ariel-previewimage"></div>
        <div class="t-div-ariel-top-meta">
            <span class="t-div-ariel-subtitle">Кроссовки мужские</span>
            <span class="t-div-ariel-title">ARIEL</span>
        </div>
        <div class="t-div-ariel-bottom-meta">
            <div class="t-div-ariel-bottom-meta-line"><span class="t-div-ariel-parameter-name">Производство:</span><span class="t-div-ariel-parameter-value">Россия</span></div>
            <div class="t-div-ariel-bottom-meta-line"><span class="t-div-ariel-parameter-name">Размер:</span><span class="t-div-ariel-parameter-value">45</span></div>
            <div class="t-div-ariel-bottom-meta-line"><span class="t-div-ariel-parameter-name">Цвет:</span><span class="t-div-ariel-parameter-value">сарколиновый</span></div>
            <div class="t-div-ariel-bottom-meta-line t-div-ariel-bottom-meta-line-price"><span class="t-div-ariel-parameter-price">Цена:</span><span class="t-div-ariel-price">5 145 ₽</span></div>
            <button class="t-div-ariel-cart-button"><i class="fa fa-heart"></i>
            </button>
            <button class="t-div-ariel-cart-button"><i class="fa fa-shopping-cart"></i> В корзину
            </button>

        </div>
    </div>
</section>

.t-div-container-card {
    width: 300px;
    height: auto;
    margin: 40px auto;
}

.t-div-ariel {
    width:300px;
    height: auto;
    background: #fdfdfd;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    padding: 20px;
    font-family: "Open Sans", Rubik, sans-serif;
}

.t-div-ariel:hover {
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
    transition: box-shadow 0.2s ease-in-out;
    transition: padding 0.05s linear;
}

.t-div-ariel .t-div-ariel-subtitle {
    font-size: 12px;
    line-height: 18px;
    color: #333333;
}

.t-div-ariel .t-div-ariel-title {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
}

.t-div-ariel .t-div-ariel-previewimage {
    height: 185px;
    background-color: #333333;
    background: url("/des/code/img-cards/sneakers.jpg") no-repeat center center;
    background-size: cover;
    border-radius: 10px 10px 0 0;
    margin: -20px -20px 20px -20px;

}

.t-div-ariel div.t-div-ariel-bottom-meta {
    padding-top: 20px;
    border-top: 1px #ddd solid;
}

.t-div-ariel div.t-div-ariel-bottom-meta-line {
    line-height: 18px;
}

.t-div-ariel div.t-div-ariel-bottom-meta-line-price {
    margin-top: 1em;
}

.t-div-ariel .t-div-ariel-parameter-name, .t-div-ariel-parameter-price {
    font-size: 12px;
    color: #999999;
}

.t-div-ariel .t-div-ariel-parameter-name:after {
    content: " ";
}

.t-div-ariel .t-div-ariel-parameter-value {
    font-size: 12px;
    color: #333333;
}

.t-div-ariel .t-div-ariel-price {
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    display: block;
}

.t-div-ariel .t-div-ariel-cart-button {
    float: right;
    position: relative;
    bottom: 30px;
}

.t-div-ariel .t-div-ariel-cart-button {
    margin-left: 5px;
    background: #999999;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #fafafa;
    font-weight: bold;
}

.t-div-ariel .t-div-ariel-cart-button:hover {
    background: cadetblue;
}

@media screen and (max-width: 360px) {
    .t-div-container-card, .t-div-ariel {
        width: 100%;
    }
}