{# LIBRARIES #}
{% extends "@templates/tm-layout/page/page.twig" %}

{# VARIABLES #}
{% set front = false %}
{% set full_width = false %}
{% set no_sidebars = false %}
{% set floating_title = false %}

{# REGIONS #}
{% set page_offcanvas = pattern_preview('region_offcanvas') %}
{% set page_header = pattern_preview('region_header') %}
{% set page_sidebar_right = pattern_preview('region_sidebar_right') %}
{% set page_footer_top = pattern_preview('region_footer_top') %}
{% set page_footer_bottom = pattern_preview('region_footer_bottom') %}
{% set page_footer_final = pattern_preview('region_footer_final') %}
{% set page_modal = pattern_preview('region_modal') %}

{% set page_highlighted = "<h1>Page no banner</h1>" %}

{% set page_content %}

  {% set data = [
    {
      "t": "[data-name='DESTINATION_STATION']",
      "s": "value",
      "v": "NOR",
      "e": "click"
    },
    {
      "t": "[data-name='ORIGIN_STATION']",
      "s": "value",
      "v": "LDN",
      "e": "focus"
    }
  ] %}

  {% set button_attrs = create_attribute()
    .setAttribute('id', 'my-id')
    .setAttribute('data-alt-toggle', 'formsetsubmit')
    .setAttribute('data-alt-target-data', data|json_encode()|escape)
    .setAttribute('data-alt-target-submit','')
  %}

  <div class="bd-text">
    <h2>This button uses form-set-submit data attribute</h2>
    <p>
      <button class="form-clicker btn btn-primary" {{ button_attrs }}>Norwich to London</button>
      <a href="#act-fid313" class="scroll-click btn btn-default">Scroll to fid313 (no self scroll)</a>
      <a href="#act-fid312" class="scroll-click btn btn-default">Scroll to fid312 (with self scroll)</a>
    </p>

    <p>
    <ul aria-owns="chip-return chip-return-open chip-single chip-season " class="choices chips-md chips-list chips-mobile ulc" role="radiogroup" aria-label="Ticket type.">
      <li class="lic" role="presentation"><a id="chip-return" href="#" data-type="return" class="active" role="radio" aria-checked="true" data-message="" tabindex="-1"><i class="fas fa-check-circle"></i> Return</a></li>
      <li class="lic" role="presentation"><a id="chip-return-open" href="#" data-type="open-return" role="radio" aria-checked="false" data-message="" tabindex="-1" class=""><i class="fas fa-check-circle"></i> Open Return</a></li>
      <li class="lic" role="presentation"><a id="chip-single" href="#" data-type="single" role="radio" aria-checked="false" data-message="" tabindex="-1" class=""><i class="fas fa-check-circle"></i> Single</a></li>
      <li class="lic" role="presentation"><a id="chip-season" href="#" data-type="season" role="radio" aria-checked="false" data-message="" tabindex="-1" class=""><i class="fas fa-check-circle"></i> Season</a></li>
    </ul>
    </p>


      <p>For those who can be flexible on when and what train to travel on, an Off-Peak ticket is for you. Designed to be used when trains are quiet and outside the commuter peak times they are great value alternatives available as one-way and return tickets. </p>
      <p><a class="buy-tickets-btn btn btn-default" href="#" title="Enter your journey details and buy tickets online" role="button" tabindex="-1" data-once="buyTicketButtons" data-dashlane-label="true" data-dashlane-rid="ccf28af66f000bc5" data-form-type="">Book Off-Peak tickets</a>
      </p>
      <h2><strong>Types of Off-Peak tickets</strong></h2>
      <div class="media clearfix">
        <div class="media-body">
          <h4><b>Off-Peak Single</b></h4>
          <p>Tickets valid for one journey on any Off-Peak train </p>
        </div>
      </div>
      <div class="media clearfix">
        <div class="media-body">
          <h4><strong>Off-Peak Day Return</strong></h4>
          <p>Tickets valid for one day on any Off-Peak trains with the return journey on the same day</p>
        </div>
      </div>
      <div class="media clearfix">
        <div class="media-body">
          <h4><b>Off-Peak Return</b></h4>
          <p>Tickets valid on any Off-Peak trains with the return journey made within one calendar month</p>
        </div>
      </div>
      <div class="media clearfix">
        <div class="media-body">
          <h4><b>£2.60 Evening Return</b></h4>
          <p>Same day return travel between any two stations in the West Midlands rail zones 1-5. Tickets valid any day from 6:30pm. Learn more about our <a href="/tickets-discounts/ticket-types/evening-return" data-entity-uuid="4296eb75-359d-4d9b-853b-17116b0285b4" data-entity-type="node" data-entity-substitution="canonical" title="£2.60 Evening Return tickets" tabindex="-1">Evening Return ticket</a>
            . </p>
        </div>
      </div>
      <div class="media clearfix">
        <div class="media-body">
          <h4><b>Daytripper</b></h4>
          <p>Unlimited Off-Peak train, bus and tram travel within the specified West Midlands rail zones. Valid for one day.</p>
        </div>
      </div>
      <div class="media clearfix">
        <div class="media-body">
          <h4><b>Super Off-Peak Day Single or Return </b></h4>
          <p>Available on longer distance routes with London Northwestern Railway. Offer the same type of flexibility as Off-Peak tickets, but some further time restrictions apply. </p>
        </div>
      </div>
      <h2><strong>Off-Peak and Super Off-Peak tickets explained</strong></h2>
      <ul><li>Cheaper than <a href="/tickets-discounts/ticket-types/anytime-train-tickets" data-entity-uuid="d0eb8a0f-c16a-4d0e-a388-2810c51bf017" data-entity-type="node" data-entity-substitution="canonical" title="Anytime train tickets" tabindex="-1">Anytime</a>
          tickets</li>
        <li>More seating available during these quieter parts of the day</li>
        <li>Single, Return and London Travelcard tickets available</li>
        <li>Weekends and bank holidays are entirely Off-Peak, so you can travel on any train at any time on Saturdays and Sundays</li>
        <li>Off-peak tickets are valid for travel on the date shown on the ticket and until 4:29 the following day, so you can get home after a night out.</li>
        <li>An <a href="/tickets-discounts/discounts/kids-go-%C2%A31-london-family-travelcard" data-entity-uuid="935b303c-c4fb-4f80-8562-bbc4d0bf62d6" data-entity-type="node" data-entity-substitution="canonical" title="Kids go for £1 with a London Family Travelcard" tabindex="-1">Off-Peak Family Travelcard</a>
          &ZeroWidthSpace; allows up to four kids travel for just £1 each to London when accompanied by an adult.</li>
        <li><a href="/tickets-discounts/discounts/railcards" data-entity-uuid="c0f19967-7a11-4bf2-bf76-284e6fb47748" data-entity-type="node" data-entity-substitution="canonical" title="Railcard discounts" tabindex="-1">Railcard</a>
          discounts apply&ZeroWidthSpace;</li>
      </ul><p>To learn more, read the full National Rail terms and conditions for <a href="https://www.nationalrail.co.uk/times_fares/ticket_types/46590.aspx" tabindex="-1">Off-Peak and Super Off-Peak</a> and <a href="https://www.nationalrail.co.uk/times_fares/ticket_types/46579.aspx" tabindex="-1">Off Peak Day and Super Off-Peak Day Tickets</a>.</p>
      <h2><strong>Off-Peak train times within the West Midlands rail zones</strong></h2>
      <div class="table-responsive"><table class="table-bordered table-condensed table" style="width:760px;"><thead><tr><th scope="row" style="width: 101px;"><strong>Ticket Type</strong></th>
            <th scope="col" style="width: 112px;"><strong>Days</strong></th>
            <th scope="col" style="width: 247px;"><strong>Travel Times</strong></th>
            <th scope="col" style="width: 265px;"><strong>Notes</strong></th>
          </tr></thead><tbody><tr><th scope="row" style="width: 101px;">
              <p>Off-Peak Day Return</p>
            </th>
            <td style="width: 112px;">Monday-Friday</td>
            <td style="width: 247px;">You can use this ticket for travel from 0930 but not between 1635 and 1800 if travelling from Birmingham New St, Moor St, Snow Hill, Five Ways or Jewellery Quarter</td>
            <td style="width: 265px;">No evening peak restrictions apply on these tickets when travelling to or beyond Hereford, Shrewsbury, Stafford or Northampton</td>
          </tr><tr><th scope="row" style="width: 101px;">
              <p>Off-Peak Day Return </p>
            </th>
            <td style="width: 112px;">Saturday, Sundays and Bank Holidays</td>
            <td style="width: 247px;">You can use this ticket for travel all day on Saturdays, Sundays or Bank Holidays</td>
            <td style="width: 265px;"> </td>
          </tr><tr><th scope="row" style="width: 101px;">
              <p>Daytripper</p>
            </th>
            <td style="width: 112px;">Monday-Friday</td>
            <td style="width: 247px;">You can use this ticket for travel from 0930. No evening peak restrictions apply to this ticket </td>
            <td style="width: 265px;">This ticket is valid for one day's off-peak travel throughout the West Midlands rail zones. </td>
          </tr><tr><th scope="row" style="width: 101px;">
              <p>Daytripper</p>
            </th>
            <td style="width: 112px;">Saturday, Sundays and Bank Holidays</td>
            <td style="width: 247px;">You can use this ticket for Travel all day on Saturdays, Sundays, or Bank Holidays</td>
            <td style="width: 265px;">This ticket is valid for one day's off-peak travel throughout the West Midlands rail zones.</td>
          </tr><tr><th scope="row" style="width: 101px;">
              <p>£2.60 Evening Fares</p>
            </th>
            <td style="width: 112px;">Monday-Sunday </td>
            <td style="width: 247px;">Travel with evening fares is valid from 1830</td>
            <td style="width: 265px;">Single traveller and group fares are available</td>
          </tr></tbody></table></div>
      <p> </p>
      <h2><strong>Travelling to London or Liverpool? Specific route restrictions below</strong></h2>
      <p>The tables below applies to tickets marked "London Northwestern Railway" or "West Midlands Railway only" (sometimes marked as "West Midlands Trains only" or "WMR/LNR Only"). Tickets marked "Any Permitted" have different conditions. </p>
      <div id="ac-cke" class="acw-a accordion">
        <h3 data-bs-toggle="collapse" data-bs-target="#aci-cke-panel-0" aria-controls="aci-cke-panel-0" role="button" id="act-cke-panel-0" aria-expanded="false" class="bel aci-a-link belirf beliag collapsed toggle" data-dashlane-label="true" data-dashlane-rid="3108f4db40bca281" data-form-type="">
          <span class="bell"><strong>Off-Peak</strong><strong> train times (to/from London)</strong></span>
          <i class="fas fa-plus beli belir"></i> <i class="fas fa-minus beli belir belih"></i></h3>
        <div data-bs-parent="#ac-cke" aria-labelledby="act-cke-panel-0" role="region" id="aci-cke-panel-0" class="collapse">
          <div class="aci-a-content">
            <div class="table-responsive"><table align="center" border="0" cellpadding="1" cellspacing="1" class="table-bordered table-condensed table" style="width:750px;"><thead><tr><th scope="row" style="width: 136px;"><strong>Ticket Type</strong></th>
                  <th scope="col" style="width: 104px;"><strong>Day </strong></th>
                  <th scope="col" style="width: 226px;"><strong>Travel time to London</strong></th>
                  <th scope="col" style="width: 257px;"><strong>Travel times from London</strong> </th>
                </tr></thead><tbody><tr><th scope="row" style="width: 136px;">
                    <p>Off-Peak Single or Return </p>
                    <p>Off-Peak return</p>
                    <p>One Day Travelcard</p>
                    <p>Family Travelcard</p>
                  </th>
                  <td style="width: 104px;">Monday-Friday </td>
                  <td style="width: 226px;">You can only use these tickets for arrival in London after 10.00am</td>
                  <td style="width: 257px;">You can leave London on trains departing from 0915 (0845 if travelling to Wolverton, Northampton and Long Buckby) </td>
                </tr><tr><th scope="row" style="width: 136px;">
                    <p>Off-Peak Day Single or Return</p>
                    <p>Off-Peak Return</p>
                    <p>One Day Travelcard</p>
                    <p>Family Travelcard</p>
                  </th>
                  <td style="width: 104px;">Saturday. Sundays and Bank Holidays</td>
                  <td style="width: 226px;">You can use these tickets for travel to London all day without restriction</td>
                  <td style="width: 257px;">
                    <p> </p>
                    <p>You can use these tickets for travel from London all day without restrictions</p>
                    <p> </p>
                  </td>
                </tr></tbody></table></div>
          </div>
        </div>
        <h3 data-bs-toggle="collapse" data-bs-target="#aci-cke-panel-1" aria-controls="aci-cke-panel-1" role="button" id="act-cke-panel-1" aria-expanded="false" class="bel aci-a-link belirf beliag collapsed toggle" data-dashlane-label="true" data-dashlane-rid="b543df50d546e378" data-form-type="">
          <span class="bell"><strong>Super Off-Peak train times (to/from London)</strong></span>
          <i class="fas fa-plus beli belir"></i> <i class="fas fa-minus beli belir belih"></i></h3>
        <div data-bs-parent="#ac-cke" aria-labelledby="act-cke-panel-1" role="region" id="aci-cke-panel-1" class="collapse">
          <div class="aci-a-content">
            <div class="table-responsive"><table align="center" border="0" cellpadding="1" cellspacing="1" class="table-bordered table-condensed table" style="width:750px;"><thead><tr><th scope="row"><strong>Ticket Type</strong></th>
                  <th scope="col"><strong>Days</strong></th>
                  <th scope="col" style="width: 225px;"><strong>Travel times to London</strong></th>
                  <th scope="col" style="width: 258px;"><strong>Travel times from London</strong></th>
                </tr></thead><tbody><tr><th scope="row">
                    <p>Super Off-Peak Day Single or return </p>
                    <p>Super Off- Peak Travelcard</p>
                  </th>
                  <td>Monday- Saturday </td>
                  <td style="width: 225px;">You can only use this ticket for arrival in London after 1300. It is also not valid on trains departing between 1600 and 1900.</td>
                  <td style="width: 258px;">
                    <p>You can leave London on trains departing from 1030 but not between 1600 and 1900.</p>
                    <p>On Saturdays customers travelling to stations between Nuneaton and Crewe can use the 1846 train from London</p>
                  </td>
                </tr><tr><th scope="row">
                    <p>Super Off-Peak day single or return</p>
                    <p>Super Off-Peak One Day Travelcard</p>
                  </th>
                  <td>Sundays and Bank Holidays</td>
                  <td style="width: 225px;">You can use these tickets for travel to London all day on Sundays without restrictions </td>
                  <td style="width: 258px;">You can use these tickets for travel from London all day on Sundays and Bank Holidays without restrictions</td>
                </tr></tbody></table></div>
          </div>
        </div>
        <h3 data-bs-toggle="collapse" data-bs-target="#aci-cke-panel-2" aria-controls="aci-cke-panel-2" role="button" id="act-cke-panel-2" aria-expanded="false" class="bel aci-a-link belirf beliag collapsed toggle" data-dashlane-label="true" data-dashlane-rid="d7c159133d9cf5ee" data-form-type="">
          <span class="bell"><strong>Super Off-Peak train times between Birmingham and Liverpool</strong></span>
          <i class="fas fa-plus beli belir"></i> <i class="fas fa-minus beli belir belih"></i></h3>
        <div data-bs-parent="#ac-cke" aria-labelledby="act-cke-panel-2" role="region" id="aci-cke-panel-2" class="collapse">
          <div class="aci-a-content">
            <div class="table-responsive"><table align="center" border="0" cellpadding="1" cellspacing="1" class="table-bordered table-condensed table" style="width:750px;"><thead><tr><th scope="row" style="width: 135px;"><strong>Ticket Type</strong></th>
                  <th scope="col" style="width: 111px;"><strong>Days</strong></th>
                  <th scope="col" style="width: 229px;"><strong>Travel times to Liverpool</strong></th>
                  <th scope="col" style="width: 255px;"><strong>Travel times from Liverpool</strong></th>
                </tr></thead><tbody><tr><th scope="row" style="width: 135px;">Super Off-Peak Return </th>
                  <td style="width: 111px;">Monday- Saturday </td>
                  <td style="width: 229px;">You can only use this ticket for arrival in Birmingham or Liverpool after 13.00</td>
                  <td style="width: 255px;">
                    <p>You can leave Birmingham or Liverpool trains that arrive in Birmingham or Liverpool after 1300. You cannot travel from Birmingham or Liverpool on trains departing between 1600 and 1900</p>
                  </td>
                </tr><tr><th scope="row" style="width: 135px;">
                    <p>Super Off-Peak Return </p>
                  </th>
                  <td style="width: 111px;">Sundays and Bank Holidays</td>
                  <td style="width: 229px;">You can use these tickets for travel between Birmingham and Liverpool and all day on Sundays without restriction</td>
                  <td style="width: 255px;">You can use these tickets for travel between Birmingham and Liverpool all day on Sundays and Bank Holidays without restrictions</td>
                </tr></tbody></table></div>
          </div>
        </div>
      </div>
      <ul><li>Off-Peak or Super Off-Peak tickets that show ‘any permitted’ allow you to travel on any train operator within any of the Off-Peak times.</li>
        <li>Off-Peak and Super Off-Peak tickets that show ‘West Midlands Trains only’ or 'WMR/LNR Only' are much cheaper than the alternative ‘any permitted’ and allow you to travel only on available West Midlands Railway or London Northwestern Railway trains.</li>
      </ul><h2 style="padding-top:10px;"><strong>How to buy Off-Peak tickets</strong></h2>
      <p>You can buy your Off-Peak tickets:</p>
      <ul><li><strong>Online </strong>with our <a class="buy-tickets-btn" href="#" tabindex="-1" data-once="buyTicketButtons">journey planner</a> </li>
        <li><strong>App </strong>- <a href="/tickets-discounts/download-our-app" title="Our mobile app" data-entity-uuid="05aeda9b-23bc-4281-af12-06327cca45ad" data-entity-type="node" data-entity-substitution="canonical" tabindex="-1">download our app</a>
          from Google Play or Apple App Store</li>
        <li><strong>Visit us</strong> at a staffed station, and our friendly team will help you out</li>
        <li><strong>At a 'self-service' ticket machine</strong> - available at many stations</li>
        <li><strong>Call us</strong> if you prefer on <a href="tel:-0333-311-0039" tabindex="-1">0333 311 0039</a> - we can help you find the right price and train</li>
      </ul><p>Daytripper tickets can be purchased through the <a href="https://legacy.wmnetwork.co.uk/tickets/#/" tabindex="-1">Transport for West Midlands ticket finder</a>. </p>
      <p><a class="buy-tickets-btn btn btn-default" href="#" title="Enter your journey details and buy tickets online" role="button" tabindex="-1" data-once="buyTicketButtons" data-dashlane-label="true" data-dashlane-rid="c762505724e13fd2" data-form-type="">Book Off-Peak tickets</a>
      </p>

  </div>

  <div id="ac-faqs-eck-exposed-form-defaults-block-1" class="acw-a accordion">

    <a data-bs-toggle="collapse" data-bs-target="#aci-fid318" aria-controls="aci-fid318" role="button" id="act-fid318" aria-expanded="false" data-alt-toggle="scrollto" data-alt-target="self" data-alt-delay="270" class="bel aci-a-link h3 belirf beliag toggle collapsed" data-once="altToggle" data-dashlane-rid="6a2efa9a6b9c49af" data-form-type="" data-dashlane-label="true">
      <span class="bell">How can I get my free Smart Card for contactless travel? </span>
      <i class="fas fa-plus beli belir"></i>  <i class="fas fa-minus beli belir belih"></i></a>
    <div data-bs-parent="#ac-faqs-eck-exposed-form-defaults-block-1" aria-labelledby="act-fid318" role="region" id="aci-fid318" class="collapse" style="">
      <div class="aci-a-content">
        <p>75% of Season Ticket holders use Smart Card for seamless travel. Order your free electronic, reusable Smart Card <a href="/tickets-fares/season-tickets/smartcard" data-entity-uuid="ada372dd-8005-4d32-b16e-165ba796db7e" data-entity-type="node" data-entity-substitution="canonical" title="Smartcard">online </a>
          – it only takes five minutes and will be delivered to your address within 3 working days. Alternatively, you can collect a physical Smart Card from one of our stations after two hours. Then simply add your purchased train season ticket to your Smart Card all in the <a href="/travel-information/journey-planning/mobile-apps" data-entity-uuid="21083ba1-5084-4472-a15a-5742d474710b" data-entity-type="node" data-entity-substitution="canonical" title="Mobile Apps">GA app</a>
          . </p>
        <a data-bs-toggle="collapse" data-bs-target="#shrc-fid318" id="shrt-fid318" href="#" class="stdl btn-outline-default btn-sm btn"><i class="fas fa-share-alt"></i> Share</a>
        <div aria-labelledby="shrt-fid318" aria-expanded="false" id="shrc-fid318" class="collapse">
          <div>
            <label for="shri-fid318" class="visually-hidden">Share link</label>
            <input name="shri-fid318" id="shri-fid318" type="text" class="mb-2 form-control form-text" value="https://www-d9.greateranglia.local/node/316438#aci-fid318">
          </div>
        </div>
      </div>
    </div>

    <a data-bs-toggle="collapse" data-bs-target="#aci-fid312" aria-controls="aci-fid312" role="button" id="act-fid312" aria-expanded="false" data-alt-toggle="scrollto" data-alt-target="self" data-alt-delay="270" class="bel aci-a-link h3 belirf  beliag collapsed toggle" data-once="altToggle" data-dashlane-rid="116b44d64676c33d" data-form-type="" data-dashlane-label="true">
      <span class="bell">I travel once or twice a week, which train ticket is right for me?</span>
      <i class="fas fa-plus beli belir"></i>  <i class="fas fa-minus beli belir belih"></i></a>
    <div data-bs-parent="#ac-faqs-eck-exposed-form-defaults-block-1" aria-labelledby="act-fid312" role="region" id="aci-fid312" class="collapse">
      <div class="aci-a-content">
        <p>If you commute one or two days a week, a Daily Anytime Return Ticket is best for you. And if you travel outside of peak time, you can get further savings with Off-Peak, or Super Off-Peak Daily Return Tickets. <a href="/tickets-fares/daily-tickets" data-entity-uuid="b9a24a4b-37dc-46d9-8047-8b5b62713d55" data-entity-type="node" data-entity-substitution="canonical" title="Daily Tickets">Find out about Daily Tickets</a>
          .</p>
        <a data-bs-toggle="collapse" data-bs-target="#shrc-fid312" id="shrt-fid312" href="#" class="stdl btn-outline-default btn-sm btn"><i class="fas fa-share-alt"></i> Share</a>
        <div aria-labelledby="shrt-fid312" aria-expanded="false" id="shrc-fid312" class="collapse">
          <div>
            <label for="shri-fid312" class="visually-hidden">Share link</label>
            <input name="shri-fid312" id="shri-fid312" type="text" class="mb-2 form-control form-text" value="https://www-d9.greateranglia.local/node/316438#aci-fid312">
          </div>
        </div>
      </div>
    </div>

    <a data-bs-toggle="collapse" data-bs-target="#aci-fid313" aria-controls="aci-fid313" role="button" id="act-fid313" aria-expanded="false" data-alt-target="self" data-alt-delay="270" class="bel aci-a-link h3 belirf  beliag collapsed toggle" data-once="altToggle" data-dashlane-rid="9bfe26c0d0c74513" data-form-type="" data-dashlane-label="true">
      <span class="bell">I travel more than three times a week, which ticket is right for me?</span>
      <i class="fas fa-plus beli belir"></i>  <i class="fas fa-minus beli belir belih"></i></a>
    <div data-bs-parent="#ac-faqs-eck-exposed-form-defaults-block-1" aria-labelledby="act-fid313" role="region" id="aci-fid313" class="collapse">
      <div class="aci-a-content">
        <p>If you commute three or more days a week regularly, choose a Monthly, Custom Length, Annual or Weekly Season Ticket. Depending on where you commute from and to, you could save up to ⅓ compared to Anytime Daily Return Tickets. </p>
        <a data-bs-toggle="collapse" data-bs-target="#shrc-fid313" id="shrt-fid313" href="#" class="stdl btn-outline-default btn-sm btn"><i class="fas fa-share-alt"></i> Share</a>
        <div aria-labelledby="shrt-fid313" aria-expanded="false" id="shrc-fid313" class="collapse">
          <div>
            <label for="shri-fid313" class="visually-hidden">Share link</label>
            <input name="shri-fid313" id="shri-fid313" type="text" class="mb-2 form-control form-text" value="https://www-d9.greateranglia.local/node/316438#aci-fid313">
          </div>
        </div>
      </div>
    </div>

  </div>


  {% for i in 0..12 %}
    <div>col-md-{{ i }}</div>
    <div class="row mb-3"><div class="bg-pri col-md-{{ i }}">&nbsp</div></div>
    <div>col-md-{{ i }}-hlf</div>
    <div class="row mb-3"><div class="bg-pri col-md-{{ i }}-hlf">&nbsp</div></div>
  {% endfor %}

  <div class="row mb-3">
    <div class="bg-pri col-md-2-hlf">col-md-2-hlf</div>
    <div class="bg-orange col-md-2-hlf">col-md-2-hlf</div>
    <div class="bg-green col-md-7">col-md-7</div>
  </div>

{% endset %}
