Grid v5

In this example below you will see how to do a Grid v5 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by vladimirs, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright vladimirs ©
  • HTML
  • CSS
  • JavaScript
    <!-- SRP -->
<section>
  <div class="Header">
    <div class="Container Container--wide">
      <svg class="Logo-branding" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139 35"><title>CarStory®</title><path fill="#268ECE" d="M11.8337838,23.1121042 C7.51888031,23.1121042 4.70936293,19.5056178 4.70936293,13.5377413 C4.70936293,7.6503668 7.7577027,4.04656371 11.9921042,4.04656371 C13.9697683,4.04656371 15.4349035,4.88915058 16.7792857,6.20938224 L19.3124131,3.32472973 C17.4290274,1.23971311 14.7613425,0.0347325605 11.9518533,1.11793886e-14 C5.30507722,1.11793886e-14 3.42240179e-15,5.0984556 3.42240179e-15,13.6584942 C3.42240179e-15,22.3500193 5.18432432,27.1559846 11.7532819,27.1559846 C15.0377606,27.1559846 17.7292085,25.7955019 19.8276255,23.3509266 L17.2944981,20.5065251 C15.8293629,22.1487645 14.1280888,23.1121042 11.8337838,23.1121042 L11.8337838,23.1121042 Z M29.6300772,6.52870656 C26.5441699,6.52870656 23.812471,7.73086873 21.6764865,9.09135135 L23.3375097,12.1638417 C25.0387838,11.1226834 26.8581274,10.242529 28.7982239,10.242529 C31.4091699,10.242529 32.2866409,12.0055212 32.3188417,14.0878378 C24.3733012,14.9814093 20.8848842,17.1844788 20.8848842,21.3893629 C20.8848842,24.8321622 23.2596911,27.1559846 26.6622394,27.1559846 C28.9592278,27.1559846 30.9368919,25.9940734 32.678417,24.5128378 L32.7964865,24.5128378 L33.1533784,26.6756564 L36.8725676,26.6756564 L36.8725676,15.0189768 C36.8725676,9.53411197 34.4977606,6.52870656 29.6300772,6.52870656 L29.6300772,6.52870656 Z M32.3134749,21.3893629 C30.8885907,22.7498456 29.662278,23.5521815 28.0790734,23.5521815 C26.4690347,23.5521815 25.3071236,22.7900965 25.3071236,21.0297876 C25.3071236,19.0655405 27.0486486,17.6648069 32.3134749,16.9832239 L32.3134749,21.3893629 L32.3134749,21.3893629 Z M43.116834,10.4947683 L42.9585135,10.4947683 L42.6418726,7.00635135 L38.8851158,7.00635135 L38.8851158,26.6702896 L43.4468919,26.6702896 L43.4468919,14.6594015 C44.6329537,11.7076641 46.4925483,10.6128378 48.0381853,10.6128378 C48.7238939,10.60927 49.4055568,10.718046 50.0561004,10.9348456 L50.8477027,6.93121622 C50.1500869,6.62716643 49.391099,6.49025457 48.6312162,6.53138996 C46.5676834,6.52870656 44.4987838,7.93212355 43.1248842,10.4947683 L43.116834,10.4947683 Z M65.0214093,11.9357529 L61.7369305,10.5725869 C59.4801931,9.65218147 57.7789189,9.09135135 57.7789189,7.48936293 C57.7789189,6.00812741 59.0830502,5.12797297 61.0633977,5.12797297 C63.1215637,5.12797297 64.7450193,5.89005792 66.4462934,7.21028958 L69.3738803,3.48573359 C67.160942,1.28995936 64.1727846,0.0532477489 61.0553475,0.0429343629 C55.7127027,0.0429343629 51.875444,3.48573359 51.875444,7.82478764 C51.875444,11.6298456 54.4085714,13.873166 57.0973359,14.9545753 L60.4220656,16.3955598 C62.6788031,17.3562162 64.1412548,17.8767954 64.1412548,19.5190347 C64.1412548,21.0807722 62.9551931,22.0414286 60.5401351,22.0414286 C58.393417,22.0414286 56.0293436,20.9224517 54.2073166,19.3177799 L50.8423359,23.3643436 C53.4530848,25.7693415 56.8697496,27.1095855 60.4193822,27.1211004 C66.5536293,27.1211004 70.1144981,23.3643436 70.1144981,19.0306564 C70.1332819,15.3409846 68.1556178,13.218417 65.0294595,11.9357529 L65.0214093,11.9357529 Z M79.6190927,22.5083398 C78.076139,22.5083398 77.0859653,21.5879344 77.0859653,19.3446139 L77.0859653,11.3749228 L81.7980116,11.3749228 L81.7980116,6.76752896 L77.0966988,6.76752896 L77.0966988,1.48123552 L72.266583,1.48123552 L71.6011004,6.76752896 L68.595695,7.00635135 L68.595695,11.3722394 L71.2790927,11.3722394 L71.2790927,19.4224324 C71.2790927,24.0271429 73.1789382,27.1130502 78.0466216,27.1130502 C79.5267468,27.1020477 80.9957819,26.8566047 82.3990927,26.3858494 L81.4894208,22.0924131 C80.8976643,22.3385879 80.2674065,22.4793516 79.6271429,22.5083398 L79.6190927,22.5083398 Z M92.0754247,6.18791506 C87.0896718,6.18791506 82.4983784,9.99297297 82.4983784,16.6021815 C82.4983784,23.21139 87.0896718,27.0137645 92.0754247,27.0137645 C97.0611776,27.0137645 101.61222,23.2087066 101.61222,16.6021815 C101.61222,9.99565637 97.0316602,6.18791506 92.0834749,6.18791506 L92.0754247,6.18791506 Z M92.0754247,22.2480502 C89.6603668,22.2480502 88.474305,20.0449807 88.474305,16.6129151 C88.474305,13.1808494 89.6630502,10.9777799 92.0754247,10.9777799 C94.4877992,10.9777799 95.6792278,13.1808494 95.6792278,16.6129151 C95.6792278,20.0449807 94.4582819,22.2507336 92.0834749,22.2507336 L92.0754247,22.2480502 Z M108.551486,10.7604247 L108.393166,10.7604247 L107.996023,7.27200772 L103.265193,7.27200772 L103.265193,27.1291506 L109.080116,27.1291506 L109.080116,15.5905405 C110.110541,12.9071429 111.929884,11.9464865 113.395019,11.9464865 C114.12251,11.9453093 114.846086,12.0529412 115.541737,12.2658108 L116.49166,7.16735521 C115.751063,6.86851742 114.954937,6.73216944 114.157104,6.76752896 C112.120405,6.79704633 109.973687,8.07702703 108.56222,10.7631081 L108.551486,10.7604247 Z M130.662683,7.15125483 L128.287876,15.6817761 C127.812915,17.5601544 127.378205,19.4385328 126.946178,21.3169112 L126.787857,21.3169112 C126.272645,19.3553475 125.797683,17.4716023 125.244903,15.6817761 L122.435386,7.15125483 L116.585579,7.15125483 L124.142027,26.4958687 L123.873687,27.537027 C123.358475,29.0987645 122.370985,30.1399228 120.430888,30.1399228 C119.989016,30.1061844 119.551909,30.026138 119.126757,29.9011004 L118.096332,34.3850579 C118.993104,34.6652009 119.928896,34.8001795 120.868282,34.7848842 C125.497143,34.7848842 127.59556,32.2222394 129.455154,27.2150193 L136.260251,7.14857143 L130.673417,7.14857143 L130.662683,7.15125483 Z M136.375637,22.2829344 C135.389449,22.2884031 134.503813,22.8878209 134.13221,23.8013348 C133.760607,24.7148486 133.97633,25.7622819 134.678663,26.4546146 C135.380996,27.1469474 136.431415,27.3476276 137.339506,26.9629627 C138.247597,26.5782978 138.834253,25.6841572 138.825579,24.6979923 C138.813782,23.3601147 137.724297,22.2826155 136.386371,22.2856178 L136.375637,22.2829344 Z M136.391737,26.6380888 C135.597625,26.6854427 134.85527,26.2425465 134.519748,25.5212406 C134.184225,24.7999346 134.323733,23.9468319 134.871543,23.3699771 C135.419354,22.7931223 136.264119,22.6097673 137.001781,22.907612 C137.739444,23.2054566 138.220067,23.9239609 138.213764,24.7194595 C138.234827,25.2166398 138.053997,25.7012183 137.712375,26.0630552 C137.370752,26.4248921 136.897357,26.6332503 136.399788,26.6407722 L136.391737,26.6380888 Z M136.928417,24.7784942 L136.928417,24.7489768 C137.200896,24.6944401 137.403785,24.4652305 137.424846,24.1881467 C137.432878,23.9830246 137.346927,23.7854367 137.19139,23.6514672 C136.937491,23.5120853 136.648192,23.4504926 136.359537,23.4743629 C136.051028,23.4696046 135.742784,23.4947673 135.439131,23.5494981 L135.439131,25.964556 L136.002645,25.964556 L136.002645,24.9904826 L136.270985,24.9904826 C136.388617,24.9696896 136.509563,24.9994849 136.604075,25.0725405 C136.698588,25.145596 136.757896,25.2551323 136.767413,25.3742085 C136.801284,25.5793524 136.865494,25.778314 136.957934,25.964556 L137.556332,25.964556 C137.464409,25.7736889 137.405437,25.5686469 137.381911,25.3581081 C137.352559,25.0973869 137.18254,24.8737848 136.939151,24.7758108 L136.928417,24.7784942 Z M136.270985,24.60139 L136.002645,24.60139 L136.002645,23.9090734 C136.103074,23.8870862 136.205771,23.8771769 136.308552,23.879556 C136.657394,23.879556 136.818398,24.0271429 136.818398,24.2498649 C136.818398,24.4725869 136.590309,24.6040734 136.270985,24.6040734 L136.270985,24.60139 Z"></path></svg>
    </div>
  </div>

  <div class="Container Container--wide">

    <div class="Count">275 Results for</div>
    <h4 class="mb1">SUVs in Austin TX</h4>

    <div class="Grid">
        <div class="Grid-cell u-full u-small-1of2 u-med-1of3 u-large-1of4">
            <div class="u-wide">
              <div class="Listing-wrap is-first" href="#demo">
                <div class="carousel carousel--mini" data-carousel-compact>
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/1.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/2.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/3.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/4.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/5.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/1.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/2.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/3.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/4.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/5.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/1.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/2.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/3.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/4.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/5.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/1.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/2.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/3.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/4.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/5.jpg">
                </div>

                <div class="Listing-info">
                    <p class="Listing-summary">Automatic / 4WD / 6 cylinder <br>16 mpg city / 22 mpg hwy <br>On market for 12 days</p>
                    <ul class="Listing-nav">
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Quick View</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Contact</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Map It</a></li>
                    </ul>
                </div>

                <button class="Listing-fav"></button>
                <div class="Listing-price h6"><sup>$</sup>97,333</div>
              </div>
            </div>
            <a class="Listing-title h6 u-ellipsis" href="#demo">2012 Mini Cooper Countryman S</a>
            <p class="Listing-addr">59,982 miles <i class="Listing-separator">/</i> Melbourne, FL</p>
        </div>
        <div class="Grid-cell u-full u-small-1of2 u-med-1of3 u-large-1of4">
            <div class="u-wide">
              <div class="Listing-wrap is-first" href="#demo">
              <div class="carousel carousel--mini" data-carousel-compact>
                <img class="carousel-cell" src="https://imgbre.bitbucket.org/2.jpg">
                <img class="carousel-cell" src="https://imgbre.bitbucket.org/2.jpg">
                <img class="carousel-cell" src="https://imgbre.bitbucket.org/2.jpg">
                <img class="carousel-cell" src="https://imgbre.bitbucket.org/2.jpg">
                <img class="carousel-cell" src="https://imgbre.bitbucket.org/2.jpg">
              </div>

              <div class="Listing-info">
                  <p class="Listing-summary">Automatic / 4WD / 6 cylinder <br>16 mpg city / 22 mpg hwy <br>On market for 12 days</p>
                  <ul class="Listing-nav">
                    <li><a class="Listing-navLink h9 u-bold" href="#demo">Quick View</a></li>
                    <li><a class="Listing-navLink h9 u-bold" href="#demo">Contact</a></li>
                    <li><a class="Listing-navLink h9 u-bold" href="#demo">Map It</a></li>
                  </ul>
              </div>

              <button class="Listing-fav"></button>
              <div class="Listing-price h6"><sup>$</sup>97,333</div>
              </div>
            </div>
            <a class="Listing-title h6 u-ellipsis" href="#demo">2013 Jeep Grand Cherokee Overland</a>
            <p class="Listing-addr">59,982 miles <i class="Listing-separator">/</i> Melbourne, FL</p>
        </div>
        <div class="Grid-cell u-full u-small-1of2 u-med-1of3 u-large-1of4">
            <div class="u-wide">
              <div class="Listing-wrap is-first" href="#demo">
                <div class="carousel carousel--mini" data-carousel-compact>
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/5.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/5.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/5.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/5.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/5.jpg">
                </div>

                <div class="Listing-info">
                    <p class="Listing-summary">Automatic / 4WD / 6 cylinder <br>16 mpg city / 22 mpg hwy <br>On market for 12 days</p>
                    <ul class="Listing-nav">
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Quick View</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Contact</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Map It</a></li>
                    </ul>
                </div>

                <button class="Listing-fav"></button>
                <div class="Listing-price h6"><sup>$</sup>97,333</div>
              </div>
            </div>
            <a class="Listing-title h6 u-ellipsis" href="#demo">2013 Jeep Grand Cherokee Limited Edition</a>
            <p class="Listing-addr">59,982 miles <i class="Listing-separator">/</i> Melbourne, FL</p>
        </div>
        <div class="Grid-cell u-full u-small-1of2 u-med-1of3 u-large-1of4">
            <div class="u-wide">
              <div class="Listing-wrap is-first" href="#demo">
                <div class="carousel carousel--mini" data-carousel-compact>
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/6.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/6.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/6.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/6.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/6.jpg">
                </div>

                <div class="Listing-info">
                    <p class="Listing-summary">Automatic / 4WD / 6 cylinder <br>16 mpg city / 22 mpg hwy <br>On market for 12 days</p>
                    <ul class="Listing-nav">
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Quick View</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Contact</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Map It</a></li>
                    </ul>
                </div>

                <button class="Listing-fav"></button>
                <div class="Listing-price h6"><sup>$</sup>97,333</div>
              </div>
            </div>
            <a class="Listing-title h6 u-ellipsis" href="#demo">2014 Toyota Highlander Limited</a>
            <p class="Listing-addr">59,982 miles <i class="Listing-separator">/</i> Melbourne, FL</p>
        </div>
        <div class="Grid-cell u-full u-small-1of2 u-med-1of3 u-large-1of4">
            <div class="u-wide">
              <div class="Listing-wrap is-first" href="#demo">
                <div class="carousel carousel--mini" data-carousel-compact>
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/3.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/3.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/3.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/3.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/3.jpg">
                </div>

                <div class="Listing-info">
                    <p class="Listing-summary">Automatic / 4WD / 6 cylinder <br>16 mpg city / 22 mpg hwy <br>On market for 12 days</p>
                    <ul class="Listing-nav">
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Quick View</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Contact</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Map It</a></li>
                    </ul>
                </div>

                <button class="Listing-fav"></button>
                <div class="Listing-price h6"><sup>$</sup>97,333</div>
              </div>
            </div>
            <a class="Listing-title h6 u-ellipsis" href="#demo">2001 Jeep Grand Cherokee Laredo</a>
            <p class="Listing-addr">59,982 miles <i class="Listing-separator">/</i> Melbourne, FL</p>
        </div>
        <div class="Grid-cell u-full u-small-1of2 u-med-1of3 u-large-1of4">
            <div class="u-wide">
              <div class="Listing-wrap is-first" href="#demo">
                <div class="carousel carousel--mini" data-carousel-compact>
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/9.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/9.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/9.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/9.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/9.jpg">
                </div>

                <div class="Listing-info">
                    <p class="Listing-summary">Automatic / 4WD / 6 cylinder <br>16 mpg city / 22 mpg hwy <br>On market for 12 days</p>
                    <ul class="Listing-nav">
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Quick View</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Contact</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Map It</a></li>
                    </ul>
                </div>

                <button class="Listing-fav"></button>
                <div class="Listing-price h6"><sup>$</sup>97,333</div>
              </div>
            </div>
            <a class="Listing-title h6 u-ellipsis" href="#demo">2014 Jeep Wrangler Sahara</a>
            <p class="Listing-addr">59,982 miles <i class="Listing-separator">/</i> Melbourne, FL</p>
        </div>
        <div class="Grid-cell u-full u-small-1of2 u-med-1of3 u-large-1of4">
            <div class="u-wide">
              <div class="Listing-wrap is-first" href="#demo">
                <div class="carousel carousel--mini" data-carousel-compact>
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/7.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/7.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/7.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/7.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/7.jpg">
                </div>

                <div class="Listing-info">
                    <p class="Listing-summary">Automatic / 4WD / 6 cylinder <br>16 mpg city / 22 mpg hwy <br>On market for 12 days</p>
                    <ul class="Listing-nav">
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Quick View</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Contact</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Map It</a></li>
                    </ul>
                </div>

                <button class="Listing-fav"></button>
                <div class="Listing-price h6"><sup>$</sup>97,333</div>
              </div>
            </div>
            <a class="Listing-title h6 u-ellipsis" href="#demo">2013 Hyundai Santa Fe Sport 2.0T</a>
            <p class="Listing-addr">59,982 miles <i class="Listing-separator">/</i> Melbourne, FL</p>
        </div>
        <div class="Grid-cell u-full u-small-1of2 u-med-1of3 u-large-1of4">
            <div class="u-wide">
              <div class="Listing-wrap is-first" href="#demo">
                <div class="carousel carousel--mini" data-carousel-compact>
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/8.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/8.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/8.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/8.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/8.jpg">
                </div>

                <div class="Listing-info">
                    <p class="Listing-summary">Automatic / 4WD / 6 cylinder <br>16 mpg city / 22 mpg hwy <br>On market for 12 days</p>
                    <ul class="Listing-nav">
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Quick View</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Contact</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Map It</a></li>
                    </ul>
                </div>

                <button class="Listing-fav"></button>
                <div class="Listing-price h6"><sup>$</sup>97,333</div>
              </div>
            </div>
            <a class="Listing-title h6 u-ellipsis" href="#demo">2014 Mercedes-Benz GL 450</a>
            <p class="Listing-addr">59,982 miles <i class="Listing-separator">/</i> Melbourne, FL</p>
        </div>
        <div class="Grid-cell u-full u-small-1of2 u-med-1of3 u-large-1of4">
            <div class="u-wide">
              <div class="Listing-wrap is-first" href="#demo">
                <div class="carousel carousel--mini" data-carousel-compact>
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/11.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/11.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/11.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/11.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/11.jpg">
                </div>

                <div class="Listing-info">
                    <p class="Listing-summary">Automatic / 4WD / 6 cylinder <br>16 mpg city / 22 mpg hwy <br>On market for 12 days</p>
                    <ul class="Listing-nav">
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Quick View</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Contact</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Map It</a></li>
                    </ul>
                </div>

                <button class="Listing-fav"></button>
                <div class="Listing-price h6"><sup>$</sup>97,333</div>
              </div>
            </div>
            <a class="Listing-title h6 u-ellipsis" href="#demo">2013 Infiniti JX35</a>
            <p class="Listing-addr">59,982 miles <i class="Listing-separator">/</i> Melbourne, FL</p>
        </div>
        <div class="Grid-cell u-full u-small-1of2 u-med-1of3 u-large-1of4">
            <div class="u-wide">
              <div class="Listing-wrap is-first" href="#demo">
                <div class="carousel carousel--mini" data-carousel-compact>
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/10.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/10.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/10.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/10.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/10.jpg">
                </div>

                <div class="Listing-info">
                    <p class="Listing-summary">Automatic / 4WD / 6 cylinder <br>16 mpg city / 22 mpg hwy <br>On market for 12 days</p>
                    <ul class="Listing-nav">
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Quick View</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Contact</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Map It</a></li>
                    </ul>
                </div>

                <button class="Listing-fav"></button>
                <div class="Listing-price h6"><sup>$</sup>97,333</div>
              </div>
            </div>
            <a class="Listing-title h6 u-ellipsis" href="#demo">2010 Acura ZDX Technology</a>
            <p class="Listing-addr">59,982 miles <i class="Listing-separator">/</i> Melbourne, FL</p>
        </div>
        <div class="Grid-cell u-full u-small-1of2 u-med-1of3 u-large-1of4">
            <div class="u-wide">
              <div class="Listing-wrap is-first" href="#demo">
                <div class="carousel carousel--mini" data-carousel-compact>
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/4.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/4.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/4.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/4.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/4.jpg">
                </div>

                <div class="Listing-info">
                    <p class="Listing-summary">Automatic / 4WD / 6 cylinder <br>16 mpg city / 22 mpg hwy <br>On market for 12 days</p>
                    <ul class="Listing-nav">
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Quick View</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Contact</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Map It</a></li>
                    </ul>
                </div>

                <button class="Listing-fav"></button>
                <div class="Listing-price h6"><sup>$</sup>97,333</div>
              </div>
            </div>
            <a class="Listing-title h6 u-ellipsis" href="#demo">2013 Toyota RAV4 XLE</a>
            <p class="Listing-addr">59,982 miles <i class="Listing-separator">/</i> Melbourne, FL</p>
        </div>
        <div class="Grid-cell u-full u-small-1of2 u-med-1of3 u-large-1of4">
            <div class="u-wide">
              <div class="Listing-wrap is-first" href="#demo">
                <div class="carousel carousel--mini" data-carousel-compact>
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/12.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/12.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/12.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/12.jpg">
                  <img class="carousel-cell" src="https://imgbre.bitbucket.org/12.jpg">
                </div>

                <div class="Listing-info">
                    <p class="Listing-summary">Automatic / 4WD / 6 cylinder <br>16 mpg city / 22 mpg hwy <br>On market for 12 days</p>
                    <ul class="Listing-nav">
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Quick View</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Contact</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Map It</a></li>
                    </ul>
                </div>

                <button class="Listing-fav"></button>
                <div class="Listing-price h6"><sup>$</sup>97,333</div>
              </div>
            </div>
            <a class="Listing-title h6 u-ellipsis" href="#demo">2015 Honda Fit EX</a>
            <p class="Listing-addr">59,982 miles <i class="Listing-separator">/</i> Melbourne, FL</p>
        </div>
    </div>
  </div>
</section>

<!-- VDP -->
<section>
  <div class="Header">
    <div class="Container">
      <img class="Logo-branding" src="https://www.carstory.com/img/carstory-logo-blue.svg">
    </div>
  </div>

  <div class="Container">
    <h4 class="mb1">2013 Jeep Grand Cherokee Overland</h4>

    <div class="Grid u-textCenter">

      <div class="Grid-cell gallery">
        <div class="u-wide u-relative">
          <div class="carousel carousel--as-nav-for-main gallery-image">
            <img class="u-full" src="https://imgbre.bitbucket.org/2.jpeg">
            <img class="u-full" src="https://imgbre.bitbucket.org/5.jpeg">
            <img class="u-full" src="https://imgbre.bitbucket.org/6.jpeg">
            <img class="u-full" src="https://imgbre.bitbucket.org/2.jpeg">
            <img class="u-full" src="https://imgbre.bitbucket.org/5.jpeg">
            <img class="u-full" src="https://imgbre.bitbucket.org/6.jpeg">
            <img class="u-full" src="https://imgbre.bitbucket.org/2.jpeg">
            <img class="u-full" src="https://imgbre.bitbucket.org/5.jpeg">
          </div>
          <div class="gallery-status"></div>
        </div>
        <div class="carousel carousel--as-nav-for-nav carousel--nav" datacarousel--nav>
          <a href="#image" class="carousel-cell carousel-thumb"><img src="https://imgbre.bitbucket.org/2.jpeg"></a>
          <a href="#image" class="carousel-cell carousel-thumb"><img src="https://imgbre.bitbucket.org/5.jpeg"></a>
          <a href="#image" class="carousel-cell carousel-thumb"><img src="https://imgbre.bitbucket.org/6.jpeg"></a>
          <a href="#image" class="carousel-cell carousel-thumb"><img src="https://imgbre.bitbucket.org/2.jpeg"></a>
          <a href="#image" class="carousel-cell carousel-thumb"><img src="https://imgbre.bitbucket.org/5.jpeg"></a>
          <a href="#image" class="carousel-cell carousel-thumb"><img src="https://imgbre.bitbucket.org/6.jpeg"></a>
          <a href="#image" class="carousel-cell carousel-thumb"><img src="https://imgbre.bitbucket.org/2.jpeg"></a>
          <a href="#image" class="carousel-cell carousel-thumb"><img src="https://imgbre.bitbucket.org/5.jpeg"></a>
        </div>
      </div>

      <div class="Grid-cell u-full u-med-1of3">
        <div class="Grid u-textCenter">
          <div class="Grid-cell u-1of4 u-med-full">
            <div class="Demo">CTA</div>
          </div>
          <div class="Grid-cell u-1of4 u-med-full">
            <div class="Demo">CTA</div>
          </div>
          <div class="Grid-cell u-1of4 u-med-full">
            <div class="Demo">CTA</div>
          </div>
          <div class="Grid-cell u-1of4 u-med-full">
            <div class="Demo">CTA</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- DOCS -->
<section class="Container">
  <h4>Basic Grids</h4>

  <p>The grid cells below do not specify any widths, they just naturally space themselves equally and expand to fit the entire row. They’re also equal height by default. </p>

  <div class="Grid Grid--gutters u-textCenter"><div class="Grid-cell"><div class="Demo">1/2</div></div><div class="Grid-cell"><div class="Demo">1/2</div></div></div>

  <div class="Grid Grid--gutters u-textCenter"><div class="Grid-cell"><div class="Demo">1/3</div></div><div class="Grid-cell"><div class="Demo">1/3</div></div><div class="Grid-cell"><div class="Demo">1/3</div></div></div>

  <div class="Grid Grid--gutters u-textCenter"><div class="Grid-cell"><div class="Demo">1/4</div></div><div class="Grid-cell"><div class="Demo">1/4</div></div><div class="Grid-cell"><div class="Demo">1/4</div></div><div class="Grid-cell"><div class="Demo">1/4</div></div></div>

  <div class="Grid Grid--gutters Grid--flexCells"><div class="Grid-cell"><div class="Demo">Full-height, even when my content doesn't fill the space.</div></div><div class="Grid-cell"><div class="Demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.</div></div></div>

  <h4>Nested Grids</h4>
  <div class="Grid Grid--flexCells u-textCenter"> <div class="Grid-cell"> <div class="Demo pl0 pr0"> <div class="Grid Grid--gutters u-textCenter"> <div class="Grid-cell u-1of2"> <div class="Demo">1/2</div> </div> <div class="Grid-cell"> <div class="Demo pl0 pr0"> <div class="Grid Grid--gutters u-textCenter"> <div class="Grid-cell"> <div class="Demo">1/2</div> </div> <div class="Grid-cell"> <div class="Demo">1/2</div> </div> </div> </div> </div> </div> </div> </div> <div class="Grid-cell u-1of3"> <div class="Demo">1/3</div> </div> </div>

  <div class="h1">A Visual Type Scale</div>
  <div class="h2">A Visual Type Scale</div>
  <div class="h3">A Visual Type Scale</div>
  <div class="h4">A Visual Type Scale</div>
  <div class="h5">A Visual Type Scale</div>
  <div class="h6">A Visual Type Scale</div>
  <div class="h7">A Visual Type Scale</div>
  <div class="h8">A Visual Type Scale</div>
  <div class="h9">A Visual Type Scale</div>
</section>

/*Downloaded from https://www.codeseek.co/vladimirs/grid-v5-rrBjRJ */
    /* Grid  & Layout */
$gutter: 16px;
$outer-margin: 16px;
$outer-margin-large: 32px;
$small-breakpoint: 540px;
$medium-breakpoint: 768px;
$large-breakpoint: 1190px;
$max-page-width: 1190px;
$max-page-width-srp: none;

/* Root font size */
$body-font-size-phone: 16px;
$body-font-size: 14.22px;

/* Font sizes */
$h1-font-size: 2.281rem;
$h2-font-size: 2.026rem;
$h3-font-size: 1.800rem;
$h4-font-size: 1.602rem;
$h5-font-size: 1.424rem;
$h6-font-size: 1.266rem;
$h7-font-size: 1.125rem;
$h8-font-size: 1.000rem;
$h9-font-size: 0.889rem;

/* Brand Colors */
$blue: #1964A3; // pass AA  6.19
$logo-blue: #268ECE; // pass AA Large 3.59
$light-blue: #29b0e9; // fail AA 2.48
$orange: #FF6600; // fail AA 2.94

/* Neutral Brand Colors */
$light-gray: #F0F0F0; // fail AA 1.14
$medium-gray: #A3AAB0; // fail AA 2.35
$dark-gray: #58595a; // pass AAA 7.02
$black-gray: #343434; // pass AAA 12.45

/* Secondary Colors */
$orange-hover: #FF8628; // fail AA 2.42
$blue-hover: #0179C3; // pass AA 4.64
$error-red: #DD2900; // pass AA 4.78

/* Other colors */
$a11y-gray: #767676; // Slightly darker $medium-gray to pass AA

/* Transition settings */
$transition-duration: 0.3s;
$transition-easing: cubic-bezier(0.25, 0.1, 0.25, 1);

/* SRP image */
$image-aspect-ratio: 56.25%;
$image-hover-scale: 1;
$image-hover-brightness: 0.7;
$image-hover-blur: 2px;


/***************************
BASE STYLES
****************************/

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: $body-font-size-phone;

  @media (min-width: $small-breakpoint) {
    font-size: $body-font-size;
  }
}

/* focus-outline-manager */
.focus-outline-hidden :focus {
    outline: none;
}

body {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  line-height: 1.4;
  color: $black-gray;
  font-weight: 300;
}

ul {
  padding: 0;
  list-style: none;
}

section {
  padding-bottom: 100px;
  position: relative; /* needed for background grid */
}

img {
  max-width: 100%;
  vertical-align: top;
}

a {
  text-decoration: none;
  color: $logo-blue;

  &:hover {
    text-decoration: underline;
  }
}

button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Type scale */

h1, .h1 {
  font-size: $h1-font-size;
  margin: 0;
  font-weight: 300;
}

h2, .h2 {
  font-size: $h2-font-size;
  margin: 0;
  font-weight: 300;
}

h3, .h3 {
  font-size: $h3-font-size;
  margin: 0;
  font-weight: 300;
}

h4, .h4 {
  font-size: $h4-font-size;
  margin: 0;
  font-weight: 300;
}

h5, .h5 {
  font-size: $h5-font-size;
  margin: 0;
  font-weight: 300;
}

h6, .h6 {
  font-size: $h6-font-size;
  margin: 0;
  font-weight: 300;
}

h7, .h7 {
  font-size: $h7-font-size;
  margin: 0;
  font-weight: 300;
}

h8, .h8 {
  font-size: $h8-font-size;
  margin: 0;
  font-weight: 300;
}

h9, .h9 {
  font-size: $h9-font-size;
  margin: 0;
  font-weight: 300;
}




/***************************
CONTAINER
****************************/

.Container {
  margin-left: auto;
  margin-right: auto;
  padding-right: $outer-margin;
  padding-left: $outer-margin;
  position: relative;
  max-width: $max-page-width;
  position: relative;
  z-index: 1;

  @media (min-width: $large-breakpoint) {
    padding-right: $outer-margin-large;
    padding-left: $outer-margin-large;
  }
}

.Container--wide {
  max-width: $max-page-width-srp;
}



/***************************
LISTING
****************************/

.Listing-title {
  margin-top: 4px;
  margin-bottom: 0;
}

.Listing-wrap {
  position: relative;
  overflow: hidden;
  display: block;
  height: 0;
  padding-bottom: $image-aspect-ratio;
  color:  white;
  background-color: $light-gray;
}

.Listing-info {
  /* position: absolute; */
  width: 100%;
  height: 100%;

  .is-touch-device & {
    background: $dark-gray;
  }
}

.Listing-price {
  position: absolute;
  bottom:  20px;
  right: 0;
  padding-right: $gutter;
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 1;
  padding-left: 5px;
  color:  white;
  border-bottom-left-radius:3px;
  border-top-left-radius: 3px;
  background-color: rgba(88, 89, 89, 0.7);
  transition: all $transition-duration $transition-easing;
  transform: translateX(0);
  opacity: 1;
  pointer-events: none;

  & sup {
    font-size: $h9-font-size;
    top:  -0.2em;
  }

  /* .is-touch-device .Listing-wrap.is-last &, */
  .Listing-wrap.is-hover &,
  .Listing-wrap.is-arrow-hover & {
    transform: translateX(100%);
    opacity: 0;
  }
}

.Listing-addr {
  color: $dark-gray;
  margin-top: 0;
  margin-bottom: 12px;
}

.Listing-separator {
  color: $logo-blue;
  margin: 0 5px;
}

.Listing-fav {
  width: 24px;
  height: 24px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: $gutter;
  right: $gutter;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='%23ffffff'%3E%3Cpath d='M12,21.3989385 L10.5986459,20.0026877 C5.39876841,15.4026129 2,12.3015344 2,8.49756745 C2,5.40261287 4.40261287,3 7.49756745,3 C9.20239513,3 10.9010989,3.80155139 12,5.1001599 C13.0989011,3.80155139 14.7976049,3 16.5024326,3 C19.5973871,3 22,5.40261287 22,8.49756745 C22,12.3015344 18.6012316,15.4026129 13.4013541,20.0026877 L12,21.3989385 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  transition: all $transition-duration $transition-easing;

  &:hover {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='%2329B0E9'%3E%3Cpath d='M12,21.3989385 L10.5986459,20.0026877 C5.39876841,15.4026129 2,12.3015344 2,8.49756745 C2,5.40261287 4.40261287,3 7.49756745,3 C9.20239513,3 10.9010989,3.80155139 12,5.1001599 C13.0989011,3.80155139 14.7976049,3 16.5024326,3 C19.5973871,3 22,5.40261287 22,8.49756745 C22,12.3015344 18.6012316,15.4026129 13.4013541,20.0026877 L12,21.3989385 Z'/%3E%3C/svg%3E");
  }
}

.Listing-wrap img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  transition: filter $transition-duration $transition-easing, transform $transition-duration $transition-easing;
  transform: translateZ(0);
}

.Listing-wrap.is-hover img.carousel-cell.is-selected {
  filter: brightness($image-hover-brightness) blur($image-hover-blur);
  transform: scale($image-hover-scale) translateZ(0);
}

.Listing-wrap.is-hover .Listing-fav,
.is-touch-device .Listing-fav {
  opacity: 1;
  visibility: visible;
}

.Listing-nav {
  display: flex;
  position: absolute;
  width: 100%;
  margin: 0;
  bottom:  14px;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: all $transition-duration $transition-easing;

  /* .is-touch-device &, */
  .Listing-wrap.is-hover & {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
}

.Listing-nav li {
  padding: 0 14px;
  border-left: 1px solid white;
  white-space: nowrap;
  line-height: 1;

  &:first-child {
    border-left: 0;
  }
}

.Listing-navLink {
  color: white;
  text-transform: uppercase;
}

.Listing-summary {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translateX(-50%) translateY(-50%) scale(0.9);
  visibility: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: all $transition-duration $transition-easing;

  /* .is-touch-device &, */
  .Listing-wrap.is-hover &  {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
  }
}

/***************************
DEMO BOX
****************************/

.Demo {
  width: 100%;
  padding: .8em 1em 0;
  background: rgba(147, 128, 108, 0.11);
  border-radius: 3px;
}

.Demo::after {
  content: '\00a0'; /* &nbsp; */
  display: block;
  margin-top: 1rem;
  height: 0px;
  visibility: hidden;
}

.Grid--background .Demo {
  background: rgba(147, 128, 108, 0.09)
}

/***************************
SCREEN SIZE STATUS BAR
****************************/

.Dimensions {
  position: fixed;
  left: $outer-margin;
  bottom: 5px;
  z-index: 2;
  font-weight: bold;
  font-size: 14px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.8);


  &:after {
    content: " < #{$small-breakpoint} (Phone)";
    color: $orange;

    @media (min-width: $small-breakpoint) {
      content: " > #{$small-breakpoint} (Phablet)";
      color: $blue;
    }

    @media (min-width: $medium-breakpoint) {
      content: " > #{$medium-breakpoint} (Tablet)";
      color: $light-blue;
    }

    @media (min-width: $large-breakpoint) {
      content: " > #{$large-breakpoint} (Desktop)";
      color: $logo-blue;
      left: $outer-margin-large;
    }
  }
}

/* Line at the bottom of the page */
body:before {
  content: "";
  position: fixed;
  bottom: 0;
  border-top: 5px solid $orange;
  width: 100%;
  z-index: 100;

  @media (min-width: $small-breakpoint) {
      border-color: $blue;
  }

  @media (min-width: $medium-breakpoint) {
    border-color: $light-blue;
  }

  @media (min-width: $large-breakpoint) {
    border-color: $logo-blue;
  }
}


/***************************
GRID
****************************/

.Grid {
  display: flex;
  flex-wrap: wrap;
  margin-top: -$gutter;
  margin-right: 0;
  margin-bottom: $gutter;
  margin-left: -$gutter;
}

.Grid--background {
  display: none;
  top: -$gutter;
  right: $outer-margin;
  bottom: -23px;
  left: $outer-margin;
  position: absolute;
  z-index: 0;
  opacity: 0.7;
  pointer-events: none;

  @media (min-width: $large-breakpoint) {
    left: $outer-margin-large;
    right: $outer-margin-large;
  }
}

/* Background grid */
html.is-visible-grid .Grid--background {
  display: flex;
}

.Grid-cell {
  flex: 1;
  padding: $gutter 0 0 $gutter;
  position: relative;
  z-index: 1;
}


.Grid--flexCells > .Grid-cell {
  display: flex;
}


/***************************
UTILITY CLASSES
****************************/

.u-textCenter {
  text-align: center;
}

.u-wide {
  margin-left: -$outer-margin;
  margin-right: -$outer-margin;

  @media (min-width: $small-breakpoint) {
    margin: 0;
  }
}

.u-fadeOnLoad {
    opacity: 0;
    transition: all $transition-duration $transition-easing;

    &.is-loaded,
    .no-js & {
        opacity: 1;
    }
}

.u-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-relative {
  position: relative;
}

.u-bold {
  font-weight: 600;
}

/* Spacing */

.mb1 {
  margin-bottom: $gutter;
}

.pl0 {
  padding-left: 0;
}

.pr0 {
  padding-right: 0;
}
/* Grid-related */

.u-full {
  width: 100%;
  flex: none;
}

.u-1of2 {
  width: 50%;
  flex: none;
}

.u-1of3 {
  width: 33.3333%;
  flex: none;
}

.u-2of3 {
  width: 66.6667%;
  flex: none;
}

.u-1of4 {
  width: 25%;
  flex: none;
}

.u-3of4 {
  width: 75%;
  flex: none;
}

.u-5of12 {
  width: 41.6666667%;
  flex: none;
}


@media (min-width: $small-breakpoint) {
  .u-small-full {
    width: 100%;
    flex: none;
  }
  .u-small-1of2 {
    width: 50%;
    flex: none;
  }
  .u-small-1of3 {
    width: 33.3333%;
    flex: none;
  }
  .u-small-2of3 {
    width: 66.6667%;
    flex: none;
  }
  .u-small-1of4 {
    width: 25%;
    flex: none;
  }
  .u-small-3of4 {
    width: 75%;
    flex: none;
  }

  .u-small-5of12 {
    width: 41.6666667%;
    flex: none;
  }

}

@media (min-width: $medium-breakpoint) {
  .u-med-full {
    width: 100%;
    flex: none;
  }
  .u-med-1of2 {
    width: 50%;
    flex: none;
  }
  .u-med-1of3 {
    width: 33.3333%;
    flex: none;
  }
  .u-med-2of3 {
    width: 66.6667%;
    flex: none;
  }
  .u-med-1of4 {
    width: 25%;
    flex: none;
  }
  .u-med-3of4 {
    width: 75%;
    flex: none;
  }

  .u-med-5of12 {
    width: 41.6666667%;
    flex: none;
  }
}

@media (min-width: $large-breakpoint) {
  .u-large-full {
    width: 100%;
    flex: none;
  }
  .u-large-1of2 {
    width: 50%;
    flex: none;
  }
  .u-large-1of3 {
    width: 33.3333%;
    flex: none;
  }
  .u-large-2of3 {
    width: 66.6667%;
    flex: none;
  }
  .u-large-1of4 {
    width: 25%;
    flex: none;
  }
  .u-large-3of4 {
    width: 75%;
    flex: none;
  }

  .u-large-5of12 {
    width: 41.6666667%;
    flex: none;
  }
}

// SRP custom layout for very large screens

.u-large-1of4 {
  @media (min-width: 1530px) {
    // max-width: 20%;
  }

  @media (min-width: 2090px) {
    flex-grow: 1;
    min-width: 292px;
    max-width: 16.6666%; // 1/6
  }

  @media (min-width: 2090px) {
    // max-width: 14.286%; /* 1/7 */
  }

  @media (min-width: 2104px) {
    // max-width: 12.5%; /* 1/8 */
  }
}



/***************************
OTHER
****************************/


.Header {
  border-bottom:  1px solid #268ece;
  margin-bottom: 12px;
  padding-top: 16px;
}

.Logo-branding {
    width: 148px;
    margin: 0;
    display: block;
    position: relative;
    left: auto;
    margin-bottom: 10px;
}

.Count {
  color: $medium-gray;
}


/****************************************
FLICKETY SWIPE SLIDER
****************************************/

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  tap-highlight-color: transparent;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  /* cursor: move; */
  /* cursor: grab; */
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  /* cursor: grabbing; */
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  position: absolute;
  transition: all $transition-duration $transition-easing;
  width: 32px;
  height: 100%;
  padding: 0;
  border: none;
/*   background: rgba(88, 89, 89, 0.7); */
  cursor: pointer;

  .is-touch-device & {
    display: none;
  }

  &:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 60px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      transition: all $transition-duration $transition-easing;
  }
}

.flickity-prev-next-button.is-hover:before,
.Listing-wrap.is-arrow-hover .flickity-prev-next-button:before {
  background: rgba(88, 89, 89, 0.7);
}

.flickity-prev-next-button:focus {
  outline: none;

  &:before {
    box-shadow: 0 0 0 5px #09F;
  }
}

.flickity-prev-next-button:active {
  opacity: 0.6;
}

.flickity-prev-next-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* pointer-events: none; */
}


.flickity-prev-next-button.previous {
  left: 0;

  svg,
  &:before {
    transform: translateX(-32px) translateY(-50%);
  }

  .Listing-wrap.is-arrow-hover &,
  .Listing-wrap.is-hover & {
      svg,
      &:before {
        transform: translateX(0) translateY(-50%);
    }
  }
}

.flickity-prev-next-button.next {
  right: 0;

  svg,
  &:before {
    transform: translateX(32px) translateY(-50%);
  }

  .Listing-wrap.is-arrow-hover &,
  .Listing-wrap.is-hover & {
      svg,
      &:before {
        transform: translateX(0) translateY(-50%);
      }
  }
}

.flickity-prev-next-button svg {
  position: absolute;
  left: 20%;
  top: 50%;
  width: 60%;
  height: 100%;
  pointer-events: none;
  transition: all $transition-duration $transition-easing;
}

.flickity-prev-next-button .arrow {
  fill: white;
  stroke: white;
  stroke-width: 4px;
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  transition: all $transition-duration $transition-easing;

  .Listing-wrap.is-arrow-hover &,
  .is-touch-device & {
    opacity: 1;
    visibility: visible;
  }

  /* .is-touch-device .Listing-wrap.is-last &, */
  .is-touch-device .Listing-wrap.is-first & {
    opacity: 0;
    visibility: hidden;
  }
}

.flickity-page-dots .dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 2.5px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

/* Custom CSS for the gallery */

.carousel {
  overflow: hidden;
}

.carousel--as-nav-for-main {
  margin-bottom: $gutter;
}

.carousel--as-nav-for-nav {
  display: none;

  @media (min-width: $small-breakpoint) {
    display: block;
  }
}

.carousel-thumb {
  transition: all $transition-duration $transition-easing;
}

.gallery:hover .carousel-thumb {
    /* filter: brightness(.8) */
}

.gallery:hover .carousel-thumb:hover {
    /* filter: brightness(1) */
}

.gallery:hover .carousel-thumb.is-selected {
  box-shadow:  inset 0 0 0 2px $black-gray;
}

.gallery:hover .carousel-thumb.is-nav-selected {
  box-shadow:  inset 0 0 0 3px $black-gray;
}

.gallery-status {
  padding: 3px 5px;
  border-radius: 3px;
  background-color: rgba(88, 89, 89, 0.7);
  color: white;
  position: absolute;
  bottom: 10px;
  left: 50%;
  tranform: translateX(-50%);
  z-index: 1;

  span {
    text-transform: uppercase;
    font-size: $h9-font-size;
  }
}

.carousel-thumb {
  width: 15.5%;
  margin-right: 10px;
}

.carousel-thumb img {
  display: block;
  position: relative;
  z-index: -1;
}

/* enable Flickity by default */
.carousel:after {
  content: '';
  display: none; /* hide :after */
}

@media (min-width: $small-breakpoint) {
  /* enable Flickity for large devices */
  .carousel:after {
    content: 'flickity';
  }
}


/* carousel height, as percentage of width */
.carousel--as-nav-for-main {
  padding-bottom: 75%;
}

.carousel--as-nav-for-nav {
  padding-bottom: 11.7%;
}

.carousel--mini {
  padding-bottom: $image-aspect-ratio;
}

.carousel-cell.is-selected {
  position: relative;
  z-index: 1;
}

/* viewport inherit size from carousel */
.carousel .flickity-viewport {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* cell inherit height from carousel */
.carousel-cell {
  height: 100%;
}


/********************************
 OTHER:
*********************************/




/*Downloaded from https://www.codeseek.co/vladimirs/grid-v5-rrBjRJ */
    window.V = {};

// Detect if touch or pointer device is being used
if ('ontouchstart' in window || navigator.maxTouchPoints) {
  document.documentElement.classList.add('is-touch-device');
  window.V.touch = true;
} else {
    document.documentElement.classList.add('is-pointer-device');
    window.V.touch = false;
}

// Print screen size on window.resize
$('<div id="dimensions" class="Dimensions"></div>').appendTo('body');

displayWindowSize();

window.onresize = displayWindowSize;

function displayWindowSize() {
  document.getElementById("dimensions").innerHTML = window.innerWidth + "px";
}

// VDP Gallery
var vdpGallery = new Flickity( '.carousel--as-nav-for-main', {
  pageDots: false,
  setGallerySize: false
});

// Get current slide in gallery
function updateStatus () {
  var cellNumber = vdpGallery.selectedIndex + 1;
  $('.gallery-status').html( cellNumber + ' <span>of</span> ' + vdpGallery.cells.length );
}

updateStatus();

vdpGallery.on( 'cellSelect', updateStatus );

// VDP Gallery thumbnails
var thumbnails = new Flickity( '.carousel--as-nav-for-nav', {
  pageDots: false,
  setGallerySize: false,
  contain: true,
  asNavFor: '.carousel--as-nav-for-main',
  percentPosition: true,
  freeScroll: true,
  watchCSS: true
});


// if touch device, listing info-overlay becames a carousel cell
if (window.V.touch) {
  $('.Listing-info').addClass('carousell-cell');
}

// SRP Gallery
$('[data-carousel-compact]').flickity({
  pageDots: true,
  setGallerySize: false,
  wrapAround: true,
  dragThreshold: 8,
  arrowShape: { "x0": 15, "x1": 60, "y1": 50, "x2": 65, "y2": 45, "x3": 25 },
  cellSelector: '.carousel-cell'
  // selectedAttraction: 0.028,
  // friction: 0.28
});

$('[data-carousel-compact]').on( 'select.flickity', addIndexClass);

function addIndexClass () {
    // if first cell
    if ($(this).data('flickity').selectedIndex === 0) {
      $(this).closest('.Listing-wrap').addClass('is-first');
    } else {
      $(this).closest('.Listing-wrap').removeClass('is-first');
    }

    // if last cell
    if ($(this).data('flickity').selectedIndex === $(this).data('flickity').slides.length - 1) {
        $(this).closest('.Listing-wrap').addClass('is-last');
    } else {
      $(this).closest('.Listing-wrap').removeClass('is-last');
    }
}

// Draw background grid
var gridBg = '<div class="Grid Grid--background Grid--flexCells"> <div class="Grid-cell"> <div class="Demo"></div> </div> <div class="Grid-cell"> <div class="Demo"></div> </div> <div class="Grid-cell"> <div class="Demo"></div> </div> <div class="Grid-cell"> <div class="Demo"></div> </div> <div class="Grid-cell"> <div class="Demo"></div> </div> <div class="Grid-cell"> <div class="Demo"></div> </div> <div class="Grid-cell"> <div class="Demo"></div> </div> <div class="Grid-cell"> <div class="Demo"></div> </div> <div class="Grid-cell"> <div class="Demo"></div> </div> <div class="Grid-cell"> <div class="Demo"></div> </div> <div class="Grid-cell"> <div class="Demo"></div> </div> <div class="Grid-cell"> <div class="Demo"></div> </div> </div>';
$('.Container').each(function () {
  $(this).append(gridBg);
});

// Toggle grid on double click
document.addEventListener('dblclick', function(e) {
  document.documentElement.classList.toggle('is-visible-grid');
},false);


// Hover intent for SRP listings

if (!window.V.touch) {
  $(document).hoverIntent({
      over: function (e) {

        var hoverEl = $(':hover');
        var lastHoverEl = hoverEl[hoverEl.length-1];

        if (! $(lastHoverEl).hasClass('flickity-prev-next-button')) {
          $(this).addClass('is-hover');
        };
      },
      out: function (e) {
        $(this).removeClass('is-hover');
      },
      selector: '.Listing-wrap',
      sensitivity: 6,
      interval: 40
  });
}

if (!window.V.touch) {
  $(document).hoverIntent({
      over: function (e) {
        this.classList.add('is-hover');
        $(this).closest('.Listing-wrap').removeClass('is-hover').addClass('is-arrow-hover');
      },
      out: function (e) {
        this.classList.remove('is-hover');
        $(this).closest('.Listing-wrap').addClass('is-hover').removeClass('is-arrow-hover');
      },
      selector: '.flickity-prev-next-button',
      sensitivity: 6,
      interval: 42
  });
}

// Hover intent for arrows

// window.onload = function() {
//   var opts = {
//     sensitivity: 2,
//     interval: 80
//   };

//   var prevNext = document.getElementsByClassName('flickity-prev-next-button');

//   Array.prototype.forEach.call(prevNext, function(el) {
//     hoverintent(el, function() {
//       this.classList.add('is-hover');
//       $(this).closest('.Listing-wrap').addClass('is-arrow-hover');
//     }, function() {
//       this.classList.remove('is-hover');
//       $(this).closest('.Listing-wrap').removeClass('is-arrow-hover');
//     }).options(opts);
//   });
// }



// Hide quick view when arrow is hovered

// $(document).on('mouseover', '.flickity-prev-next-button', function(){
//   $(this).closest('.Listing-wrap').removeClass('is-hover')
// });

// $(document).on('mouseout', '.flickity-prev-next-button', function(){
//   $(this).closest('.Listing-wrap').addClass('is-hover')
// });

Comments