<section class="variant-collection" id="$URLSegment">
    <div class="wrapper">
        <h2>$Title</h2>
        $Content
        <%-- Varianten Slider Nav für < 768px --%>
        <div class="variant-nav">
            <a class="mill-finish" href="#mill-finish" data-modifier="0"><span>Mill finish</span></a>
            <a class="decorator" href="#decorator" data-modifier="1"><span>Decorator</span></a>
            <a class="designer" href="#designer" data-modifier="2"><span>Designer</span></a>
        </div>

    <div class="variant-outer-wrapper">
        <div class="variant-wrapper">

            <%-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////// --%>
            <%-- Mill Finish --%>
            <%-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////// --%>
            <article class="variant" id="mill-finish">
                <figure>
                    <figcaption>
                        <strong>Mill finish</strong>
                        <small><%t Muellbox.MODEL 'Modell' %> C</small>
                    </figcaption>
                    <img class="img-responsive" src="$resourceURL('themes/standard/dist/img/Millfinish.png')" alt="Mill finish"/>
                </figure>

                <h3><%t Variants.INCLUSIVEFEATURES 'Features inklusive' %></h3>
                <ul class="feature-list inclusive-features">
                    <li class="feature"><i class="fa fa-check-square-o"></i>Liner</li>
                </ul>

                <h3><%t Variants.OPTIONALFEATURES 'Optionale Features' %></h3>
                <ul class="feature-list optional-features">
                    <li class="feature"><i class="fa fa-square-o"></i><%t Variants.ASHTRAY 'Aschenbecher' %></li>
                </ul>
            </article>

            <%-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////// --%>
            <%-- Decorator --%>
            <%-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////// --%>
            <article class="variant" id="decorator">
                <figure>
                    <figcaption>
                        <strong>Decorator</strong>
                        <small><%t Muellbox.MODEL 'Modell' %> C</small>
                    </figcaption>
                    <img class="img-responsive" src="$resourceURL('themes/standard/dist/img/Decorator.png')" alt="Decorator"/>
                </figure>

                <h3><%t Variants.INCLUSIVEFEATURES 'Features inklusive' %></h3>
                <ul class="feature-list inclusive-features">
                    <li class="feature"><i class="fa fa-check-square-o"></i>Liner</li>
                    <li class="feature"><i class="fa fa-check-square-o"></i><%t Variants.CUSTOMRAL 'Individuelle RAL Farbe' %></li>
                    <li class="feature"><i class="fa fa-check-square-o"></i><%t Variants.POWDERCOATING 'Pulverbeschichtung' %></li>
                </ul>

                <h3><%t Variants.OPTIONALFEATURES 'Optionale Features' %></h3>
                <ul class="feature-list optional-features">
                    <li class="feature"><i class="fa fa-square-o"></i><%t Variants.ASHTRAY 'Aschenbecher' %></li>
                </ul>
            </article>


            <%-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////// --%>
            <%-- Designer --%>
            <%-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////// --%>
            <article class="variant" id="designer">
                <figure>
                    <figcaption>
                        <strong>Designer</strong>
                        <small><%t Muellbox.MODEL 'Modell' %> C</small>
                    </figcaption>
                    <img class="img-responsive" src="$resourceURL('themes/standard/dist/img/Designer.png')" alt="Designer"/>
                </figure>

                <h3><%t Variants.INCLUSIVEFEATURES 'Features inklusive' %></h3>
                <ul class="feature-list inclusive-features">
                    <li class="feature"><i class="fa fa-check-square-o"></i>Liner</li>
                    <li class="feature"><i class="fa fa-check-square-o"></i><%t Variants.CUSTOMRAL 'Individuelle RAL Farbe' %></li>
                    <li class="feature"><i class="fa fa-check-square-o"></i><%t Variants.POWDERCOATING 'Pulverbeschichtung' %></li>
                    <li class="feature"><i class="fa fa-check-square-o"></i><%t Variants.GOLDENSTRIPES 'Goldene Streifen' %></li>
                    <li class="feature"><i class="fa fa-check-square-o"></i><%t Variants.CUSTOMDECALS 'Individuelle Aufdrucke' %></li>
                </ul>

                <h3><%t Variants.OPTIONALFEATURES 'Optionale Features' %></h3>
                <ul class="feature-list optional-features">
                    <li class="feature"><i class="fa fa-square-o"></i><%t Variants.ASHTRAY 'Aschenbecher' %></li>
                </ul>
            </article>
        </div>
    </div>

    <p class="contact-button-wrapper">
        <a class="contact-button $KontaktButtonHref.CSS" href="$KontaktButtonHref.Link"><%t Variants.CONTACT 'Nehmen Sie kontakt mit uns auf!' %> <i class="fa fa-chevron-right"></i></a>
    </p>
    </div>
</section>
