<div id="make-3D-space-{{ include.id }}" class="make-3D-space">
    <div id="product-card-{{ include.id }}" class="product-card" data-id="{{ include.id }}">
        <div id="product-front-{{ include.id }}" class="product-front">
            <div class="shadow"></div>
            <img src="{{ include.img }}" alt="{{ include.model }}" class="img-center"/>
            <a href="{{ include.href }}{% if site.special-offers.customers %}{{ '#special-offers' }}{% endif %}"><div class="image_overlay"></div></a>
            <div id="view_details-{{ include.id }}" class="view_details d-none" data-id="{{ include.id }}">View details</div>
            <div class="stats">
              <a href="{{ include.href }}{% if site.special-offers.customers %}{{ '#special-offers' }}{% endif %}">
                <div class="stats-container">
                  <span class="product_price">{{ include.price }} {{ include.currency }}</span>
                  <span class="product_name">{{ include.commercial }}</span>
                  <p class="product_description">{{ include.desc }}</p>
                  <div class="product-options">
                    <strong>{{ site.data.i18n.common.product-cards[site.lang].3d-space.model.title | default: 'Model' }}</strong>
                    <span>{{ include.model }}</span>
                    <strong>{{ site.data.i18n.common.product-cards[site.lang].3d-space.brand.title | default: 'Brand' }}</strong>
                    <span>{{ include.brand }}</span>
                  </div>
                </div>
              </a>
            </div>
        </div>
        <div id="product-back-{{ include.id }}" class="product-back">
	        <div class="shadow"></div>
            <div id="carousel-{{ include.id }}" class="carousel">
                <!-- <ul>
                    <li class="marketing-theme content-centered"><img src="{{ include.img | replace: '.png', '_02.png' }}" alt="{{ include.model }}" /></li>
                    <li class="marketing-theme content-centered"><img src="{{ include.img | replace: '.png', '_03.png' }}" alt="{{ include.model }}" /></li>
                    <li class="marketing-theme content-centered"><img src="{{ include.img | replace: '.png', '_04.png' }}" alt="{{ include.model }}" /></li>
                </ul> -->
                <div class="arrows-perspective">
                    <div class="carouselPrev" data-id="{{ include.id }}">
                        <div class="y"></div>
	                    <div class="x"></div>
                    </div>
                    <div class="carouselNext" data-id="{{ include.id }}">
                        <div class="y"></div>
	                    <div class="x"></div>
                    </div>
                </div>
            </div>
            <div id="flip-back-{{ include.id }}" class="flip-back" data-id="{{ include.id }}">
            	<div id="cy-{{ include.id }}" class="cy"></div>
                <div id="cx-{{ include.id }}" class="cx"></div>
            </div>
        </div>
    </div>
</div>