Grid v7 test2

In this example below you will see how to do a Grid v7 test2 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 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Grid v7 test2</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,' rel='stylesheet' type='text/css'>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- SRP -->
<section>
  <div class="Header">
    <div class="Container Container--wide">
      <a href="#"><img class="Logo-branding" src="https://imgbre.bitbucket.io/logo.svg"></a>
    </div>
  </div>

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

    <div class="Count">VERSION 2</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">Dealer Page</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Call<span class="Listing-ctaText"> Dealer</span></a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo"><span class="Listing-ctaText">Get </span>Directions</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">Dealer Page</a></li>
                    <li><a class="Listing-navLink h9 u-bold" href="#demo">Call<span class="Listing-ctaText"> Dealer</span></a></li>
                    <li><a class="Listing-navLink h9 u-bold" href="#demo"><span class="Listing-ctaText">Get </span>Directions</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">Dealer Page</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Call<span class="Listing-ctaText"> Dealer</span></a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo"><span class="Listing-ctaText">Get </span>Directions</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">Dealer Page</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Call<span class="Listing-ctaText"> Dealer</span></a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo"><span class="Listing-ctaText">Get </span>Directions</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">Dealer Page</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Call<span class="Listing-ctaText"> Dealer</span></a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo"><span class="Listing-ctaText">Get </span>Directions</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">Dealer Page</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Call<span class="Listing-ctaText"> Dealer</span></a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo"><span class="Listing-ctaText">Get </span>Directions</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">Dealer Page</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Call<span class="Listing-ctaText"> Dealer</span></a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo"><span class="Listing-ctaText">Get </span>Directions</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">Dealer Page</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Call<span class="Listing-ctaText"> Dealer</span></a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo"><span class="Listing-ctaText">Get </span>Directions</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">Dealer Page</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Call<span class="Listing-ctaText"> Dealer</span></a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo"><span class="Listing-ctaText">Get </span>Directions</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">Dealer Page</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Call<span class="Listing-ctaText"> Dealer</span></a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo"><span class="Listing-ctaText">Get </span>Directions</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">Dealer Page</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Call<span class="Listing-ctaText"> Dealer</span></a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo"><span class="Listing-ctaText">Get </span>Directions</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">Dealer Page</a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo">Call<span class="Listing-ctaText"> Dealer</span></a></li>
                      <li><a class="Listing-navLink h9 u-bold" href="#demo"><span class="Listing-ctaText">Get </span>Directions</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>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://rawgit.com/vladimirsiljkovic/focus-outline-manager/master/focus-outline-manager.js'></script>
<script src='https://rawgit.com/metafizzy/flickity/master/dist/flickity.pkgd.js'></script>
<script src='https://rawgit.com/briancherne/jquery-hoverIntent/master/jquery.hoverIntent.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/vladimirs/grid-v7-test2-rrzPYY */
/* Grid  & Layout */
/* Breakpoints */
/* Root font size */
/* Font sizes */
/* Brand Colors */
/* Neutral Brand Colors */
/* Secondary Colors */
/* Other colors */
/* Transition settings */
/* SRP image */
/***************************
BASE STYLES
****************************/
* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 16px;
}
@media (min-width: 540px) {
  html {
    font-size: 14.22px;
  }
}

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

body {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  line-height: 1.4;
  color: #343434;
  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: #268ECE;
}
a: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: 2.281rem;
  margin: 0;
  font-weight: 300;
}

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

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

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

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

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

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

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

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

/***************************
CONTAINER
****************************/
.Container {
  margin-left: auto;
  margin-right: auto;
  padding-right: 16px;
  padding-left: 16px;
  position: relative;
  max-width: 1190px;
  position: relative;
  z-index: 1;
}
@media (min-width: 1190px) {
  .Container {
    padding-right: 32px;
    padding-left: 32px;
  }
}

.Container--wide {
  max-width: none;
}

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

.Listing-wrap {
  position: relative;
  overflow: hidden;
  display: block;
  height: 0;
  padding-bottom: 56.25%;
  color: white;
  background-color: #F0F0F0;
}

.Listing-info {
  /* position: absolute; */
  width: 100%;
  height: 100%;
}
.is-touch-device .Listing-info {
  background: #58595a;
}

.Listing-price {
  display: none;
  position: absolute;
  bottom: 20px;
  right: 0;
  padding-right: 16px;
  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 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
  pointer-events: none;
  /* .is-touch-device .Listing-wrap.is-last &, */
}
.Listing-price sup {
  font-size: 0.889rem;
  top: -0.2em;
}
.Listing-wrap.is-hover .Listing-price, .Listing-wrap.is-arrow-hover .Listing-price {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  opacity: 0;
}

.Listing-addr {
  color: #58595a;
  margin-top: 0;
  margin-bottom: 12px;
}

.Listing-separator {
  color: #268ECE;
  margin: 0 5px;
}

.Listing-fav {
  display: none;
  width: 24px;
  height: 24px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 16px;
  right: 16px;
  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 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.Listing-fav: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;
  -o-object-fit: cover;
     object-fit: cover;
  transition: -webkit-filter 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: filter 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: filter 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-filter 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

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

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

.Listing-nav {
  display: none;
  display: flex;
  position: absolute;
  width: 100%;
  margin: 0;
  bottom: 14px;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  /* .is-touch-device &, */
}
.Listing-wrap.is-hover .Listing-nav {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

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

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

.Listing-summary {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.9);
          transform: translateX(-50%) translateY(-50%) scale(0.9);
  visibility: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  /* .is-touch-device &, */
}
.Listing-wrap.is-hover .Listing-summary {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
          transform: translateX(-50%) translateY(-50%) scale(1);
}

.Listing-ctaText {
  display: none;
}
@media (min-width: 340px) {
  .Listing-ctaText {
    display: inline;
  }
}
@media (min-width: 540px) {
  .Listing-ctaText {
    display: none;
  }
}
@media (min-width: 1380px) {
  .Listing-ctaText {
    display: inline;
  }
}

/***************************
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: 16px;
  bottom: 5px;
  z-index: 2;
  font-weight: bold;
  font-size: 14px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.8);
}
.Dimensions:after {
  content: " < 540px (Phone)";
  color: #FF6600;
}
@media (min-width: 540px) {
  .Dimensions:after {
    content: " > 540px (Phablet)";
    color: #1964A3;
  }
}
@media (min-width: 768px) {
  .Dimensions:after {
    content: " > 768px (Tablet)";
    color: #29b0e9;
  }
}
@media (min-width: 1190px) {
  .Dimensions:after {
    content: " > 1190px (Desktop)";
    color: #268ECE;
    left: 32px;
  }
}

/* Line at the bottom of the page */
body:before {
  content: "";
  position: fixed;
  bottom: 0;
  border-top: 5px solid #FF6600;
  width: 100%;
  z-index: 100;
}
@media (min-width: 540px) {
  body:before {
    border-color: #1964A3;
  }
}
@media (min-width: 768px) {
  body:before {
    border-color: #29b0e9;
  }
}
@media (min-width: 1190px) {
  body:before {
    border-color: #268ECE;
  }
}

/***************************
GRID
****************************/
.Grid {
  display: flex;
  flex-wrap: wrap;
  margin-top: -16px;
  margin-right: 0;
  margin-bottom: 16px;
  margin-left: -16px;
}

.Grid--background {
  display: none;
  top: -16px;
  right: 16px;
  bottom: -23px;
  left: 16px;
  position: absolute;
  z-index: 0;
  opacity: 0.7;
  pointer-events: none;
}
@media (min-width: 1190px) {
  .Grid--background {
    left: 32px;
    right: 32px;
  }
}

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

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

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

/***************************
UTILITY CLASSES
****************************/
.u-textCenter {
  text-align: center;
}

.u-wide {
  margin-left: -16px;
  margin-right: -16px;
}
@media (min-width: 540px) {
  .u-wide {
    margin: 0;
  }
}

.u-fadeOnLoad {
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.u-fadeOnLoad.is-loaded, .no-js .u-fadeOnLoad {
  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: 16px;
}

.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: 540px) {
  .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: 768px) {
  .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: 1190px) {
  .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;
  }
}
@media (min-width: 2090px) {
  .u-large-1of4 {
    flex-grow: 1;
    min-width: 292px;
    max-width: 16.6666%;
  }
}

/***************************
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: #A3AAB0;
}

/****************************************
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;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  width: 32px;
  height: 100%;
  padding: 0;
  border: none;
  /*   background: rgba(88, 89, 89, 0.7); */
  cursor: pointer;
}
.is-touch-device .flickity-prev-next-button {
  display: none;
}
.flickity-prev-next-button:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 60px;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.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;
}
.flickity-prev-next-button:focus: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;
}
.flickity-prev-next-button.previous svg, .flickity-prev-next-button.previous:before {
  -webkit-transform: translateX(-32px) translateY(-50%);
          transform: translateX(-32px) translateY(-50%);
}
.Listing-wrap.is-arrow-hover .flickity-prev-next-button.previous svg, .Listing-wrap.is-arrow-hover .flickity-prev-next-button.previous:before, .Listing-wrap.is-hover .flickity-prev-next-button.previous svg, .Listing-wrap.is-hover .flickity-prev-next-button.previous:before {
  -webkit-transform: translateX(0) translateY(-50%);
          transform: translateX(0) translateY(-50%);
}

.flickity-prev-next-button.next {
  right: 0;
}
.flickity-prev-next-button.next svg, .flickity-prev-next-button.next:before {
  -webkit-transform: translateX(32px) translateY(-50%);
          transform: translateX(32px) translateY(-50%);
}
.Listing-wrap.is-arrow-hover .flickity-prev-next-button.next svg, .Listing-wrap.is-arrow-hover .flickity-prev-next-button.next:before, .Listing-wrap.is-hover .flickity-prev-next-button.next svg, .Listing-wrap.is-hover .flickity-prev-next-button.next:before {
  -webkit-transform: translateX(0) translateY(-50%);
          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 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

/* ---- page dots ---- */
.flickity-page-dots {
  display: none;
  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 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  /* .is-touch-device .Listing-wrap.is-last &, */
}
.Listing-wrap.is-arrow-hover .flickity-page-dots, .is-touch-device .flickity-page-dots {
  opacity: 1;
  visibility: visible;
}
.is-touch-device .Listing-wrap.is-first .flickity-page-dots {
  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: 16px;
}

.carousel--as-nav-for-nav {
  display: none;
}
@media (min-width: 540px) {
  .carousel--as-nav-for-nav {
    display: block;
  }
}

.carousel-thumb {
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.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 #343434;
}

.gallery:hover .carousel-thumb.is-nav-selected {
  box-shadow: inset 0 0 0 3px #343434;
}

.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;
}
.gallery-status span {
  text-transform: uppercase;
  font-size: 0.889rem;
}

.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: 540px) {
  /* 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: 56.25%;
}

.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-v7-test2-rrzPYY */
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,
    dragThreshold: 10,
});

// 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: 10,
  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