<section class="rc-related-products">
  <div class="rc-related-head">
    <div>
      <span class="rc-related-kicker">{{ text_related_kicker }}</span>
      <h3>{{ heading_title }}</h3>
      <p>{{ text_related_subtitle }}</p>
    </div>
    <div class="rc-related-vehicle"><i class="fa fa-car"></i>{{ vehicle_title }}</div>
  </div>

  <div class="rc-related-grid">
    {% for product in products %}
      <article class="rc-related-card rc-family-{{ product.family }}">
        <a href="{{ product.href }}" class="rc-related-image"><img src="{{ product.image }}" alt="{{ product.chip_name }}" loading="lazy"></a>
        <div class="rc-related-body">
          <div class="rc-related-name">{{ product.chip_name }}</div>
          {% if not product.is_controller %}
            <div class="rc-related-metrics">
              {% if product.performance_ps is not null %}<span><strong>+{{ product.performance_ps|round }}</strong> HP</span>{% endif %}
              {% if product.performance_kw is not null %}<span><strong>+{{ product.performance_kw|round }}</strong> kW</span>{% endif %}
              {% if product.performance_nm is not null %}<span><strong>+{{ product.performance_nm|round }}</strong> Nm</span>{% endif %}
            </div>
          {% else %}
            <div class="rc-related-response"><i class="fa fa-bolt"></i> {{ text_throttle_response }}</div>
          {% endif %}
          <div class="rc-related-bottom">
            <div class="rc-related-price">{% if product.special %}<small>{{ product.price }}</small><strong>{{ product.special }}</strong>{% else %}<strong>{{ product.price }}</strong>{% endif %}</div>
            <a href="{{ product.href }}" class="rc-related-link">{{ text_view_product }} <i class="fa fa-angle-right"></i></a>
          </div>
        </div>
      </article>
    {% endfor %}
  </div>
</section>
<style>
.rc-related-products{--rc-orange:#e65100;max-width:1380px;margin:55px auto 30px;padding:0 18px;font-family:Roboto,"Helvetica Neue",Arial,sans-serif}.rc-related-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding-bottom:17px;border-bottom:1px solid #dedfe0;margin-bottom:22px}.rc-related-kicker{display:block;color:#8a8e91;font-size:9px;letter-spacing:1.6px;font-weight:900}.rc-related-head h3{font-size:26px;line-height:1.15;margin:5px 0;color:#202124;font-weight:800;letter-spacing:-.4px}.rc-related-head p{margin:0;color:#74797d;font-size:13px}.rc-related-vehicle{max-width:430px;text-align:right;color:#565b5f;font-size:11px;font-weight:700}.rc-related-vehicle i{color:var(--rc-orange);margin-right:7px}.rc-related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.rc-related-card{background:#fff;border:1px solid #e1e2e3;min-width:0;transition:.2s}.rc-related-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.09);border-color:#cacccf}.rc-related-image{display:flex;height:190px;align-items:center;justify-content:center;padding:15px;background:#f5f5f3}.rc-related-image img{max-width:100%;max-height:100%;object-fit:contain}.rc-related-body{padding:15px}.rc-related-name{font-size:17px;font-weight:850;color:#202124;margin-bottom:11px}.rc-related-metrics{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.rc-related-metrics span{padding:5px 7px;background:#f4f4f4;font-size:9px;color:#666}.rc-related-metrics strong{font-size:12px;color:#262729}.rc-related-response{margin-bottom:14px;color:#64696d;font-size:11px}.rc-related-response i{color:var(--rc-orange);margin-right:6px}.rc-related-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-top:1px solid #ececed;padding-top:12px}.rc-related-price{display:flex;flex-direction:column}.rc-related-price small{text-decoration:line-through;color:#909498}.rc-related-price strong{font-size:18px;color:#202124}.rc-related-link{font-size:10px;text-transform:uppercase;font-weight:900;letter-spacing:.35px;color:var(--rc-orange)!important}.rc-related-link i{margin-left:4px}@media(max-width:1050px){.rc-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.rc-related-products{margin-top:35px;padding:0 12px}.rc-related-head{align-items:flex-start;flex-direction:column;gap:8px}.rc-related-head h3{font-size:22px}.rc-related-vehicle{text-align:left}.rc-related-grid{grid-template-columns:1fr}.rc-related-card{display:grid;grid-template-columns:125px 1fr}.rc-related-image{height:100%;min-height:155px}.rc-related-body{padding:13px}.rc-related-name{font-size:15px}.rc-related-bottom{align-items:center}}@media(max-width:390px){.rc-related-card{grid-template-columns:105px 1fr}.rc-related-image{padding:8px}.rc-related-metrics{gap:4px}.rc-related-metrics span{padding:4px 5px}}
</style>
