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

<section class="t-div-container-wide-card">
    <div class="t-div-freya">
        <nav class="t-div-freya-navigation">
            <div class="t-div-freya-navigation-back"><span><a href="#">Вернуться</a></span></div>
            <div class="t-div-freya-navigation-buttons"><span><i class="fa fa-heart"></i></span><span><i class="fa fa-plus"></i></span><span><i class="fa fa-share"></i></span></div>
        </nav>
        <div class="t-div-freya-grid">
            <div class="t-div-freya-previewimage"></div>
            <div class="t-div-freya-base">
                <div class="t-div-freya-subtitle"><span>Коллекция: Prawn</span></div>
                <div class="t-div-freya-title"><h3>Чашка Nautilus</h3></div>
                <div class="t-div-freya-price">499. -</div>
                <div class="t-div-freya-description">
                    Теория наивного и сентиментального искусства, так или иначе, характерна. Гармония начинает деструктивный анимус, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Энергия либидо представляет собой художественный идеал.
                </div>

                <div class="t-div-freya-cart-buttons">
                    <button class="t-div-freya-cart-button"><span>В корзину</span></button>
                </div>
            </div>
        </div>
    </div>
</section>

.t-div-freya {
    background: #eeeeee;
    max-width: 576px;
    margin: 40px auto;
    font-size: 18px;
}

.t-div-freya  nav.t-div-freya-navigation {
    display: flex;
    font-family: "Open Sans", sans-serif;
    font-size: 11pt;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 20px;
    color: #666666;
    border-bottom: 1px solid #dddddd;
}

.t-div-freya  nav.t-div-freya-navigation .t-div-freya-navigation-back a {
    text-decoration: none;
    color: #666666;
}


.t-div-freya  nav.t-div-freya-navigation .t-div-freya-navigation-back a:hover {
    color: #777777;
}

.t-div-freya  nav.t-div-freya-navigation .t-div-freya-navigation-back span::before {
    content: "<";
    margin-right: 5px;
}

.t-div-freya  nav.t-div-freya-navigation .t-div-freya-navigation-back span::before:hover {
    color: #777777;
}

.t-div-freya  nav.t-div-freya-navigation .t-div-freya-navigation-buttons {
    margin-left: auto;
}

.t-div-freya  nav.t-div-freya-navigation .t-div-freya-navigation-buttons span {
    margin-left: 15px;
    color: #999999;
    cursor: pointer;
}

.t-div-freya  nav.t-div-freya-navigation .t-div-freya-navigation-buttons span:hover {
    color: #777777;
}

.t-div-freya .t-div-freya-grid {
    display: flex;
}

.t-div-freya .t-div-freya-previewimage {
    flex-basis: 40%;
    min-height: 200px;
    background: url("/des/code/img-cards/cup.jpg") no-repeat center center;
    background-size: cover;
    border-right: 1px solid #dddddd;
}

.t-div-freya .t-div-freya-base {
    flex-basis: 60%;
    background: inherit;
    padding: 0 20px 20px 20px;

}

.t-div-freya div.t-div-freya-base .t-div-freya-title h3 {
    color: #666666;
    font-size: 16pt;
    font-weight: lighter;
    padding: 10px 0 0 0;
    margin: 0;
    font-family: "Open Sans", sans-serif;
}

.t-div-freya div.t-div-freya-subtitle span {
    display: block;
    padding: 15px 0 0 0;
    font-size: 9pt;
    color: #999999;
}

.t-div-freya div.t-div-freya-price {
    padding: 10px 0;
    font-size: 32pt;
    color: #444444;
}

.t-div-freya div.t-div-freya-description {
    font-size: 10pt;
    color: #999999;
    line-height: 15pt;
}

.t-div-freya .t-div-freya-cart-buttons {
    margin: 20px 0 0 0;
}

/*== button styles ==*/

.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button {
    position: relative;
    width: 140px;
    height: 40px;
    background: none;
    padding: 0!important;
    text-align: center;
    border: 3px solid #777777;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 12pt;
    color: #777777;
    line-height: 34px; /*height - 2 x borderWidth*/

    transition: all 0.3s ease;
}

.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button:hover{
    /* supplementary :hover styles */
}

.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button:before,
.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background: #777777;
    transition: all 0.3s ease;
}

.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button:before {
    height: 0;
    width: 1px;
}

.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button:after {
    width: 0;
    height: 1px;
}

.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button:hover:before {
    height: 100%;
}

.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button:hover:after {
    width: 100%;
}

.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button span:before,
.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button span:after {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    background: #777777;
    transition: all 0.3s ease;
}
.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button span:before {
    width: 1px;
    height: 0;
}

.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button span:after {
    width: 0;
    height: 1px;
}

.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button span:hover:before {
    height: 100%;
}

.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button span:hover:after {
    width: 100%;
}

.t-div-freya .t-div-freya-cart-buttons .t-div-freya-cart-button:active {
    top:1px;
}

@media screen and (max-width: 640px) {
	.t-div-freya-grid {
		flex-direction: column; 
	}
	
	.t-div-freya .t-div-freya-previewimage {
		height: 350px;
	}
	
}