@{
    ViewData["Title"] = "Каталог";
}

<div class="page-head">
    <span class="section-overline">Каталог</span>
    <h1 class="page-title">Каталог техники</h1>
    <p class="page-subtitle">4 товара · Ноутбуки, смартфоны, планшеты, наушники</p>
</div>

<div class="row g-3 g-md-4">

    
    <div class="col-lg-3 col-md-6 col-12">
        <article class="product-card">
            <span class="product-card__badge badge-hit">Хит продаж</span>
            <div class="product-card__media"><i class="bi bi-laptop"></i></div>
            <div class="product-card__body">
                <h5 class="product-card__name">Ноутбук Pro 15</h5>
                <div class="product-card__specs">
                    <span>Экран 15.6" · 8 ГБ RAM · SSD 512 ГБ</span>
                </div>
                <div class="product-card__footer">
                    <span class="product-card__price">89 990 &#8381;</span>
                    <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
                </div>
            </div>
        </article>
    </div>

    
    <div class="col-lg-3 col-md-6 col-12">
        <article class="product-card">
            <span class="product-card__badge badge-hit">Хит продаж</span>
            <div class="product-card__media"><i class="bi bi-phone"></i></div>
            <div class="product-card__body">
                <h5 class="product-card__name">Смартфон Nova X</h5>
                <div class="product-card__specs">
                    <span>Экран 6.7" · Камера 108 Мп · 128 ГБ</span>
                </div>
                <div class="product-card__footer">
                    <span class="product-card__price">29 990 &#8381;</span>
                    <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
                </div>
            </div>
        </article>
    </div>

    
    <div class="col-lg-3 col-md-6 col-12">
        <article class="product-card">
            <span class="product-card__badge badge-new">Новинка</span>
            <div class="product-card__media"><i class="bi bi-tablet"></i></div>
            <div class="product-card__body">
                <h5 class="product-card__name">Планшет Tab Lite</h5>
                <div class="product-card__specs">
                    <span>Экран 11" · 4 ГБ RAM · 128 ГБ</span>
                </div>
                <div class="product-card__footer">
                    <span class="product-card__price">18 490 &#8381;</span>
                    <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
                </div>
            </div>
        </article>
    </div>

    
    <div class="col-lg-3 col-md-6 col-12">
        <article class="product-card">
            <span class="product-card__badge badge-hot">Выгодно</span>
            <div class="product-card__media"><i class="bi bi-headphones"></i></div>
            <div class="product-card__body">
                <h5 class="product-card__name">Наушники SoundMax</h5>
                <div class="product-card__specs">
                    <span>Bluetooth 5.3 · ANC · 40 ч автономной работы</span>
                </div>
                <div class="product-card__footer">
                    <span class="product-card__price">3 990 &#8381;</span>
                    <a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
                </div>
            </div>
        </article>
    </div>

</div>