{% load static %}
{% block style %}
  <style>
    .custom-card {
      background: linear-gradient(272.22deg, #FFFFFF 27.19%, #FBF7ED 102.09%);
      border: 1px solid #E8E8E8;
      border-radius: 2px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
    }

    .custom-card-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: #111111;
    }

    .custom-card-text {
      font-size: 0.8rem;
      color: #111111;
    }

    .row-spec {
      display: flex;
      align-items: stretch;
    }
  </style>
{% endblock %}

<section class="sect pt-0">
    <div class="container">
      <div class="row row-spec">
        <div class="col-md-6 mb-3">
          <div class="card custom-card">
            <div class="card-body d-flex align-items-center justify-content-between">
              <div>
                <h5 class="custom-card-title">Есть предложение от другой компании?</h5>
                <p class="custom-card-text">Направьте его нам и мы сделаем более выгодное предложение!</p>
                <button class="color-brown color-brown-hover-black" data-src="#modalBestPrice" data-fancybox onclick="ym(91395761,'reachGoal','view'); return true;">Подробнее...</button>
              </div>
              <div class="icon-wrapper ms-3" style="max-width: 80px;">
               <img src="{% static 'img/admin/product/best-price.png' %}?v=1" alt="Discount Icon"> <!-- Иконка скидки -->
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 mb-3">
          <div class="card custom-card">
            <div class="card-body d-flex align-items-center justify-content-between">
              <div>
                <h5 class="custom-card-title">Первое ТО - бесплатно!</h5>
                <p class="custom-card-text">При покупке спецтехники до конца 2025г.</p>
                <button class="color-brown color-brown-hover-black" data-src="#modalFreeTo" data-fancybox onclick="ym(91395761,'reachGoal','view'); return true;">Подробнее...</button>
              </div>
              <div class="icon-wrapper ms-3" style="max-width: 100px;">
                <img src="{% static 'img/admin/product/to.png' %}?v=1" alt="Service Icon"> <!-- Иконка ТО -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>