Карточка товара — Serana

<section class="t-div-container-wide-card">
    <div class="t-div-serana">
        <div class="t-div-serana-previewimage"></div>
        <div class="t-div-serana-base">
            <div class="t-div-serana-top-meta">
                <div class="t-div-serana-subtitle">studio design</div>
                <div class="t-div-serana-title">Lora vase</div>
            </div>
            <div class="t-div-serana-description">
                Имидж предприятия стремительно синхронизирует принцип восприятия. Позиционирование на рынке, конечно, масштабирует рейтинг. Медиамикс, пренебрегая деталями, вполне вероятен.
            </div>
            <div class="t-div-serana-bottom-meta">
                <div class="t-div-serana-bottom-meta-line"><span class="t-div-serana-parameter-name">Производство:</span><span class="t-div-serana-parameter-value">Италия</span></div>
                <div class="t-div-serana-price">2 500 руб.</div>
            </div>
        </div>
    </div>
</section>

.t-div-serana {
    background: #fdfdfd;
    display: flex;
    max-width: 576px;
    margin: 40px auto;
}

.t-div-serana .t-div-serana-previewimage {
    background: #333333;
    background: url("/des/code/img-cards/serana.jpg") no-repeat center center;
    background-size: cover;
    flex-basis: 50%;
}

.t-div-serana .t-div-serana-base {
    padding: 40px 30px;
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.t-div-serana .t-div-serana-top-meta {
    flex-shrink: 2;
}

.t-div-serana .t-div-serana-subtitle {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999999;
    font-family: "Open Sans", sans-serif;
    font-size: 10pt;
    flex-shrink: 1;
}

.t-div-serana .t-div-serana-title {
    color: darkcyan;
    font-family: "Lora", serif;
    font-size: 18pt;
    font-weight: bold;
    font-style: italic;
    margin: 5px 0;
}

.t-div-serana .t-div-serana-description {
    flex-grow: 2;
    display:flex;
    justify-content:center;
    flex-direction: column;
    font-size: 11pt;
    color: #333333;
    line-height: 1.44em;
}

.t-div-serana .t-div-serana-bottom-meta {
    flex-shrink: 1;
}

.t-div-serana .t-div-serana-bottom-meta-line {
    font-size: 10pt;
    color: #666666;
}

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

.t-div-serana .t-div-serana-price {
    font-family: "Lora", serif;
    font-size: 16pt;
    font-weight: bold;
    margin: 10px 0 0 0;
}

@media screen and (max-width: 640px) {
    .t-div-serana {
        flex-direction: column;
        max-width: 320px;
    }
    .t-div-serana .t-div-serana-previewimage {
        min-height: 320px;    
    }
}