Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <a href="#">
    <article class="product-tile">
      <div class="product-image">
        <img src="https://fo-lmvz-eshop-dev.opacc.net/CatCache/catcache.2/pictures/426100.00/426100.00_L_01.png"/>
      </div>
      <button class="AddtoWatchlist">
        <svg version="1.1" class="icon icon-mark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 366.72 350.75" style="enable-background:new 0 0 366.72 350.75;" xml:space="preserve">
          <path class="icon icon-mark" d="M354.71,121.83c-33.68-4.89-67.36-9.79-101.03-14.68c-2.53-0.37-5.07-0.74-7.61-1.11c-13.96-28.28-27.91-56.56-41.87-84.84
          c-1.91-3.88-3.82-7.74-5.73-11.62c-0.33-0.78-0.73-1.54-1.19-2.26c-4.06-6.71-14.11-9.23-21.06-5.79c-3.07,1.29-5.71,3.5-7.3,6.72
          c-15.06,30.52-30.12,61.03-45.18,91.55c-1.03,2.08-2.05,4.16-3.08,6.24c-31.45,4.57-62.91,9.14-94.35,13.71
          c-4.76,0.69-9.53,1.38-14.29,2.08c-12.79,1.86-15.57,19.95-7.38,27.94c24.37,23.75,48.74,47.51,73.11,71.26
          c1.42,1.39,2.85,2.77,4.27,4.16c-5.16,30.09-10.33,60.19-15.49,90.29c-0.81,4.74-1.63,9.49-2.44,14.23
          c-1.17,6.81,0.27,13.15,5.99,17.57c5.44,4.21,12.51,4.49,18.57,1.31c30.12-15.84,60.25-31.67,90.37-47.51
          c1.45-0.76,2.9-1.52,4.35-2.29c27.31,14.36,54.63,28.71,81.93,43.08c4.26,2.24,8.52,4.48,12.78,6.72
          c6.04,3.18,13.08,2.93,18.57-1.31c5.65-4.36,7.16-10.75,5.99-17.57c-5.75-33.54-11.51-67.08-17.26-100.63
          c-0.22-1.3-0.44-2.59-0.67-3.89c22.35-21.78,44.69-43.56,67.04-65.34c3.45-3.36,6.89-6.72,10.34-10.08
          C370.28,141.78,367.5,123.69,354.71,121.83z M191.83,265.51c-9.42-4.48-16.12-0.44-23.99,3.7c-17.62,9.26-35.24,18.53-52.86,27.79
          c-4.22,2.22-8.44,4.44-12.66,6.65c3.81-22.23,7.62-44.45,11.44-66.68c0.75-4.39,1.58-8.78,2.26-13.19
          c1.65-10.74-3.5-15.54-10.02-21.89c-14.26-13.9-28.51-27.79-42.77-41.69c-3.66-3.56-7.31-7.13-10.97-10.69
          c23.56-3.42,47.11-6.84,70.67-10.27c4.34-0.63,8.91-0.93,13.19-1.92c8.07-1.86,10.6-8.73,13.75-15.11
          c8.84-17.92,17.69-35.84,26.53-53.76c2.32-4.69,4.63-9.39,6.95-14.08c10.4,21.07,20.8,42.15,31.2,63.22
          c1.95,3.95,3.69,8.13,5.9,11.95c4.4,7.63,10.89,7.9,18.22,8.96c19.77,2.87,39.55,5.75,59.32,8.62c5.48,0.8,10.97,1.59,16.45,2.39
          c-16.62,16.2-33.23,32.39-49.85,48.59c-3.17,3.09-6.63,6.04-9.58,9.34c-6.63,7.39-4.44,15.64-2.98,24.18
          c3.37,19.62,6.73,39.24,10.1,58.87c0.75,4.39,1.51,8.78,2.26,13.17c-20.24-10.64-40.47-21.28-60.72-31.92
          C199.73,269.67,195.84,267.42,191.83,265.51z"/>
        </svg>
      </button>
      <div class="product-content">
        <h3>Mathematik 1 Sekundarstufe 1</h3>
        <h4>Themenbuch</h4>
        <span class="product-availability">an Lager</span>
        <div class="product-price">
          <span class="price">CHF 17.70</span>
          <span class="price-info">inkl. MwSt. (Listenpreis)</span>
        </div>
        <button class="AddtoCart">
          <svg version="1.1" class="icon icon-cart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 369.42 267.62" style="enable-background:new 0 0 369.42 26d7.62;" xml:space="preserve">
<path d="M357.14,4.66c-8.99-2.05-17.89,2.7-20.56,11.68c-12.05,40.46-23.19,81.19-33.45,122.14
	c-64.47,0-128.93,0-193.4,0C99.21,96.21,87.75,54.19,75.31,12.44C73.32,5.75,66.93,0.5,60,0.11c-3.36-0.38-6.87,0.24-10.13,2.08
	c-13.86,7.83-27.72,15.67-41.58,23.5c-7.62,4.3-10.84,15.36-6,22.87c4.96,7.7,14.72,10.6,22.87,6c7.91-4.47,15.82-8.94,23.73-13.41
	c11.02,37.98,21.25,76.19,30.69,114.6c0.17,0.69,0.41,1.36,0.68,2.02c1.47,7.89,7.94,14.15,16.4,14.15c72.73,0,145.47,0,218.2,0
	c0.85,0,1.68-0.09,2.51-0.23c6.82-0.59,13.18-4.91,14.93-12.04c11.08-45.09,23.25-89.91,36.5-134.41
	C371.31,16.85,365.81,6.64,357.14,4.66z"/>
            <circle cx="123.75" cy="234.19" r="33.43"/>
            <circle cx="289.41" cy="234.19" r="33.43"/>
          </svg>
        </button>
      </div>
    </article>
  </a>


    <a href="#">
    <article class="product-tile">
      <div class="product-image">
        <img src="https://fo-lmvz-eshop-dev.opacc.net/CatCache/catcache.2/pictures/426100.00/426100.00_L_01.png"/>
      </div>
      <button class="AddtoWatchlist">
        <svg version="1.1" class="icon icon-mark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 366.72 350.75" style="enable-background:new 0 0 366.72 350.75;" xml:space="preserve">
          <path d="M354.71,121.83c-33.68-4.89-67.36-9.79-101.03-14.68c-2.53-0.37-5.07-0.74-7.61-1.11c-13.96-28.28-27.91-56.56-41.87-84.84
          c-1.91-3.88-3.82-7.74-5.73-11.62c-0.33-0.78-0.73-1.54-1.19-2.26c-4.06-6.71-14.11-9.23-21.06-5.79c-3.07,1.29-5.71,3.5-7.3,6.72
          c-15.06,30.52-30.12,61.03-45.18,91.55c-1.03,2.08-2.05,4.16-3.08,6.24c-31.45,4.57-62.91,9.14-94.35,13.71
          c-4.76,0.69-9.53,1.38-14.29,2.08c-12.79,1.86-15.57,19.95-7.38,27.94c24.37,23.75,48.74,47.51,73.11,71.26
          c1.42,1.39,2.85,2.77,4.27,4.16c-5.16,30.09-10.33,60.19-15.49,90.29c-0.81,4.74-1.63,9.49-2.44,14.23
          c-1.17,6.81,0.27,13.15,5.99,17.57c5.44,4.21,12.51,4.49,18.57,1.31c30.12-15.84,60.25-31.67,90.37-47.51
          c1.45-0.76,2.9-1.52,4.35-2.29c27.31,14.36,54.63,28.71,81.93,43.08c4.26,2.24,8.52,4.48,12.78,6.72
          c6.04,3.18,13.08,2.93,18.57-1.31c5.65-4.36,7.16-10.75,5.99-17.57c-5.75-33.54-11.51-67.08-17.26-100.63
          c-0.22-1.3-0.44-2.59-0.67-3.89c22.35-21.78,44.69-43.56,67.04-65.34c3.45-3.36,6.89-6.72,10.34-10.08
          C370.28,141.78,367.5,123.69,354.71,121.83z M191.83,265.51c-9.42-4.48-16.12-0.44-23.99,3.7c-17.62,9.26-35.24,18.53-52.86,27.79
          c-4.22,2.22-8.44,4.44-12.66,6.65c3.81-22.23,7.62-44.45,11.44-66.68c0.75-4.39,1.58-8.78,2.26-13.19
          c1.65-10.74-3.5-15.54-10.02-21.89c-14.26-13.9-28.51-27.79-42.77-41.69c-3.66-3.56-7.31-7.13-10.97-10.69
          c23.56-3.42,47.11-6.84,70.67-10.27c4.34-0.63,8.91-0.93,13.19-1.92c8.07-1.86,10.6-8.73,13.75-15.11
          c8.84-17.92,17.69-35.84,26.53-53.76c2.32-4.69,4.63-9.39,6.95-14.08c10.4,21.07,20.8,42.15,31.2,63.22
          c1.95,3.95,3.69,8.13,5.9,11.95c4.4,7.63,10.89,7.9,18.22,8.96c19.77,2.87,39.55,5.75,59.32,8.62c5.48,0.8,10.97,1.59,16.45,2.39
          c-16.62,16.2-33.23,32.39-49.85,48.59c-3.17,3.09-6.63,6.04-9.58,9.34c-6.63,7.39-4.44,15.64-2.98,24.18
          c3.37,19.62,6.73,39.24,10.1,58.87c0.75,4.39,1.51,8.78,2.26,13.17c-20.24-10.64-40.47-21.28-60.72-31.92
          C199.73,269.67,195.84,267.42,191.83,265.51z"/>
        </svg>
      </button>
      <div class="product-content">
        <h3>Mathematik 1 Sekundarstufe 1</h3>
        <h4>Themenbuch</h4>
        <span class="product-availability">an Lager</span>
        <div class="product-price">
          <span class="price">CHF 17.70</span>
          <span class="price-info">inkl. MwSt. (Listenpreis)</span>
        </div>
        <button class="AddtoCart">
          <svg version="1.1" class="icon icon-cart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 369.42 267.62" style="enable-background:new 0 0 369.42 26d7.62;" xml:space="preserve">
<path d="M357.14,4.66c-8.99-2.05-17.89,2.7-20.56,11.68c-12.05,40.46-23.19,81.19-33.45,122.14
	c-64.47,0-128.93,0-193.4,0C99.21,96.21,87.75,54.19,75.31,12.44C73.32,5.75,66.93,0.5,60,0.11c-3.36-0.38-6.87,0.24-10.13,2.08
	c-13.86,7.83-27.72,15.67-41.58,23.5c-7.62,4.3-10.84,15.36-6,22.87c4.96,7.7,14.72,10.6,22.87,6c7.91-4.47,15.82-8.94,23.73-13.41
	c11.02,37.98,21.25,76.19,30.69,114.6c0.17,0.69,0.41,1.36,0.68,2.02c1.47,7.89,7.94,14.15,16.4,14.15c72.73,0,145.47,0,218.2,0
	c0.85,0,1.68-0.09,2.51-0.23c6.82-0.59,13.18-4.91,14.93-12.04c11.08-45.09,23.25-89.91,36.5-134.41
	C371.31,16.85,365.81,6.64,357.14,4.66z"/>
            <circle cx="123.75" cy="234.19" r="33.43"/>
            <circle cx="289.41" cy="234.19" r="33.43"/>
          </svg>
        </button>
      </div>
    </article>
  </a>

    <a href="#">
    <article class="product-tile">
      <div class="product-image">
        <img src="https://fo-lmvz-eshop-dev.opacc.net/CatCache/catcache.2/pictures/426100.00/426100.00_L_01.png"/>
      </div>
      <button class="AddtoWatchlist">
        <svg version="1.1" class="icon icon-mark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 366.72 350.75" style="enable-background:new 0 0 366.72 350.75;" xml:space="preserve">
          <path d="M354.71,121.83c-33.68-4.89-67.36-9.79-101.03-14.68c-2.53-0.37-5.07-0.74-7.61-1.11c-13.96-28.28-27.91-56.56-41.87-84.84
          c-1.91-3.88-3.82-7.74-5.73-11.62c-0.33-0.78-0.73-1.54-1.19-2.26c-4.06-6.71-14.11-9.23-21.06-5.79c-3.07,1.29-5.71,3.5-7.3,6.72
          c-15.06,30.52-30.12,61.03-45.18,91.55c-1.03,2.08-2.05,4.16-3.08,6.24c-31.45,4.57-62.91,9.14-94.35,13.71
          c-4.76,0.69-9.53,1.38-14.29,2.08c-12.79,1.86-15.57,19.95-7.38,27.94c24.37,23.75,48.74,47.51,73.11,71.26
          c1.42,1.39,2.85,2.77,4.27,4.16c-5.16,30.09-10.33,60.19-15.49,90.29c-0.81,4.74-1.63,9.49-2.44,14.23
          c-1.17,6.81,0.27,13.15,5.99,17.57c5.44,4.21,12.51,4.49,18.57,1.31c30.12-15.84,60.25-31.67,90.37-47.51
          c1.45-0.76,2.9-1.52,4.35-2.29c27.31,14.36,54.63,28.71,81.93,43.08c4.26,2.24,8.52,4.48,12.78,6.72
          c6.04,3.18,13.08,2.93,18.57-1.31c5.65-4.36,7.16-10.75,5.99-17.57c-5.75-33.54-11.51-67.08-17.26-100.63
          c-0.22-1.3-0.44-2.59-0.67-3.89c22.35-21.78,44.69-43.56,67.04-65.34c3.45-3.36,6.89-6.72,10.34-10.08
          C370.28,141.78,367.5,123.69,354.71,121.83z M191.83,265.51c-9.42-4.48-16.12-0.44-23.99,3.7c-17.62,9.26-35.24,18.53-52.86,27.79
          c-4.22,2.22-8.44,4.44-12.66,6.65c3.81-22.23,7.62-44.45,11.44-66.68c0.75-4.39,1.58-8.78,2.26-13.19
          c1.65-10.74-3.5-15.54-10.02-21.89c-14.26-13.9-28.51-27.79-42.77-41.69c-3.66-3.56-7.31-7.13-10.97-10.69
          c23.56-3.42,47.11-6.84,70.67-10.27c4.34-0.63,8.91-0.93,13.19-1.92c8.07-1.86,10.6-8.73,13.75-15.11
          c8.84-17.92,17.69-35.84,26.53-53.76c2.32-4.69,4.63-9.39,6.95-14.08c10.4,21.07,20.8,42.15,31.2,63.22
          c1.95,3.95,3.69,8.13,5.9,11.95c4.4,7.63,10.89,7.9,18.22,8.96c19.77,2.87,39.55,5.75,59.32,8.62c5.48,0.8,10.97,1.59,16.45,2.39
          c-16.62,16.2-33.23,32.39-49.85,48.59c-3.17,3.09-6.63,6.04-9.58,9.34c-6.63,7.39-4.44,15.64-2.98,24.18
          c3.37,19.62,6.73,39.24,10.1,58.87c0.75,4.39,1.51,8.78,2.26,13.17c-20.24-10.64-40.47-21.28-60.72-31.92
          C199.73,269.67,195.84,267.42,191.83,265.51z"/>
        </svg>
      </button>
      <div class="product-content">
        <h3>Mathematik 1 Sekundarstufe 1</h3>
        <h4>Themenbuch</h4>
        <span class="product-availability">an Lager</span>
        <div class="product-price">
          <span class="price">CHF 17.70</span>
          <span class="price-info">inkl. MwSt. (Listenpreis)</span>
        </div>
        <button class="AddtoCart">
          <svg version="1.1" class="icon icon-cart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 369.42 267.62" style="enable-background:new 0 0 369.42 26d7.62;" xml:space="preserve">
<path d="M357.14,4.66c-8.99-2.05-17.89,2.7-20.56,11.68c-12.05,40.46-23.19,81.19-33.45,122.14
	c-64.47,0-128.93,0-193.4,0C99.21,96.21,87.75,54.19,75.31,12.44C73.32,5.75,66.93,0.5,60,0.11c-3.36-0.38-6.87,0.24-10.13,2.08
	c-13.86,7.83-27.72,15.67-41.58,23.5c-7.62,4.3-10.84,15.36-6,22.87c4.96,7.7,14.72,10.6,22.87,6c7.91-4.47,15.82-8.94,23.73-13.41
	c11.02,37.98,21.25,76.19,30.69,114.6c0.17,0.69,0.41,1.36,0.68,2.02c1.47,7.89,7.94,14.15,16.4,14.15c72.73,0,145.47,0,218.2,0
	c0.85,0,1.68-0.09,2.51-0.23c6.82-0.59,13.18-4.91,14.93-12.04c11.08-45.09,23.25-89.91,36.5-134.41
	C371.31,16.85,365.81,6.64,357.14,4.66z"/>
            <circle cx="123.75" cy="234.19" r="33.43"/>
            <circle cx="289.41" cy="234.19" r="33.43"/>
          </svg>
        </button>
      </div>
    </article>
  </a>


    <a href="#">
    <article class="product-tile">
      <div class="product-image">
        <img src="https://fo-lmvz-eshop-dev.opacc.net/CatCache/catcache.2/pictures/426100.00/426100.00_L_01.png"/>
      </div>
      <button class="AddtoWatchlist">
        <svg version="1.1" class="icon icon-mark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 366.72 350.75" style="enable-background:new 0 0 366.72 350.75;" xml:space="preserve">
          <path d="M354.71,121.83c-33.68-4.89-67.36-9.79-101.03-14.68c-2.53-0.37-5.07-0.74-7.61-1.11c-13.96-28.28-27.91-56.56-41.87-84.84
          c-1.91-3.88-3.82-7.74-5.73-11.62c-0.33-0.78-0.73-1.54-1.19-2.26c-4.06-6.71-14.11-9.23-21.06-5.79c-3.07,1.29-5.71,3.5-7.3,6.72
          c-15.06,30.52-30.12,61.03-45.18,91.55c-1.03,2.08-2.05,4.16-3.08,6.24c-31.45,4.57-62.91,9.14-94.35,13.71
          c-4.76,0.69-9.53,1.38-14.29,2.08c-12.79,1.86-15.57,19.95-7.38,27.94c24.37,23.75,48.74,47.51,73.11,71.26
          c1.42,1.39,2.85,2.77,4.27,4.16c-5.16,30.09-10.33,60.19-15.49,90.29c-0.81,4.74-1.63,9.49-2.44,14.23
          c-1.17,6.81,0.27,13.15,5.99,17.57c5.44,4.21,12.51,4.49,18.57,1.31c30.12-15.84,60.25-31.67,90.37-47.51
          c1.45-0.76,2.9-1.52,4.35-2.29c27.31,14.36,54.63,28.71,81.93,43.08c4.26,2.24,8.52,4.48,12.78,6.72
          c6.04,3.18,13.08,2.93,18.57-1.31c5.65-4.36,7.16-10.75,5.99-17.57c-5.75-33.54-11.51-67.08-17.26-100.63
          c-0.22-1.3-0.44-2.59-0.67-3.89c22.35-21.78,44.69-43.56,67.04-65.34c3.45-3.36,6.89-6.72,10.34-10.08
          C370.28,141.78,367.5,123.69,354.71,121.83z M191.83,265.51c-9.42-4.48-16.12-0.44-23.99,3.7c-17.62,9.26-35.24,18.53-52.86,27.79
          c-4.22,2.22-8.44,4.44-12.66,6.65c3.81-22.23,7.62-44.45,11.44-66.68c0.75-4.39,1.58-8.78,2.26-13.19
          c1.65-10.74-3.5-15.54-10.02-21.89c-14.26-13.9-28.51-27.79-42.77-41.69c-3.66-3.56-7.31-7.13-10.97-10.69
          c23.56-3.42,47.11-6.84,70.67-10.27c4.34-0.63,8.91-0.93,13.19-1.92c8.07-1.86,10.6-8.73,13.75-15.11
          c8.84-17.92,17.69-35.84,26.53-53.76c2.32-4.69,4.63-9.39,6.95-14.08c10.4,21.07,20.8,42.15,31.2,63.22
          c1.95,3.95,3.69,8.13,5.9,11.95c4.4,7.63,10.89,7.9,18.22,8.96c19.77,2.87,39.55,5.75,59.32,8.62c5.48,0.8,10.97,1.59,16.45,2.39
          c-16.62,16.2-33.23,32.39-49.85,48.59c-3.17,3.09-6.63,6.04-9.58,9.34c-6.63,7.39-4.44,15.64-2.98,24.18
          c3.37,19.62,6.73,39.24,10.1,58.87c0.75,4.39,1.51,8.78,2.26,13.17c-20.24-10.64-40.47-21.28-60.72-31.92
          C199.73,269.67,195.84,267.42,191.83,265.51z"/>
        </svg>
      </button>
      <div class="product-content">
        <h3>Mathematik 1 Sekundarstufe 1</h3>
        <h4>Themenbuch</h4>
        <span class="product-availability">an Lager</span>
        <div class="product-price">
          <span class="price">CHF 17.70</span>
          <span class="price-info">inkl. MwSt. (Listenpreis)</span>
        </div>
        <button class="AddtoCart">
          <svg version="1.1" class="icon icon-cart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 369.42 267.62" style="enable-background:new 0 0 369.42 26d7.62;" xml:space="preserve">
<path d="M357.14,4.66c-8.99-2.05-17.89,2.7-20.56,11.68c-12.05,40.46-23.19,81.19-33.45,122.14
	c-64.47,0-128.93,0-193.4,0C99.21,96.21,87.75,54.19,75.31,12.44C73.32,5.75,66.93,0.5,60,0.11c-3.36-0.38-6.87,0.24-10.13,2.08
	c-13.86,7.83-27.72,15.67-41.58,23.5c-7.62,4.3-10.84,15.36-6,22.87c4.96,7.7,14.72,10.6,22.87,6c7.91-4.47,15.82-8.94,23.73-13.41
	c11.02,37.98,21.25,76.19,30.69,114.6c0.17,0.69,0.41,1.36,0.68,2.02c1.47,7.89,7.94,14.15,16.4,14.15c72.73,0,145.47,0,218.2,0
	c0.85,0,1.68-0.09,2.51-0.23c6.82-0.59,13.18-4.91,14.93-12.04c11.08-45.09,23.25-89.91,36.5-134.41
	C371.31,16.85,365.81,6.64,357.14,4.66z"/>
            <circle cx="123.75" cy="234.19" r="33.43"/>
            <circle cx="289.41" cy="234.19" r="33.43"/>
          </svg>
        </button>
      </div>
    </article>
  </a>
              
            
!

CSS

              
                @font-face {
  font-family: 'Router-Book';
  src: url('https://www.lmvz.ch/Portals/0/Skins/LmvzCorp/fonts/Router-Book.woff');
}
@font-face {
  font-family: 'Router-Medium';
  src: url('https://www.lmvz.ch/Portals/0/Skins/LmvzCorp/fonts/Router-Medium.woff');
}

:root {
    --font-family: 'Router-Book', Arial, sans-serif;
    --color-primary-blue: #AFDFF9;
    --color-primary-red: #EC656A;
    --color-secondary-green: #66C0B5;
    --color-gray-light: #F0F0F0;
    --color-gray-dark: #181715;
}

* {
  font-family: var(--font-family);
  text-decoration: none!important;
  color: var(--color-gray-dark);
  margin: 0;
  padding: 0;
  font-weight: 300;
  h3 {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 5px;
  }
  h4 {
    font-size: 16px;
    line-height: 20px;
  }
  span {
    display: block;
  }
  section {
    margin: 30px auto;
  }
  a {
    display: inline-block;
  }
}

article {
  position: relative;
  margin: 60px 15px 0;
  &.product-tile {
    background: var(--color-gray-light);
    width: 270px;
    border-radius: 5px;
    padding: 25px;
    transition: all .2s ease;
    box-sizing: border-box;
    .product-image {
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 0 30px 0 rgba(24,23,21,0.2);
      transition: all .2s ease;
      height: 167.75px;
      img {
        width: 120px;
      }
    }
    .product-content {
      margin-top: 150px;
      position: relative;
      transition: all .2s ease;
      .product-availability {
        font-size: 13px;
        font-weight: bold;
        margin: 10px 0;
        color: var(--color-secondary-green)
      }
      .product-price {
        span {
          display: block;
        }
        .price {
          font-weight: bold;
          font-size: 16px;
          margin: 5px 0;
        }
        .price-info {
          font-size: 12px;
        }
      }
    }
    button {
      background: transparent;
      outline: none;
      cursor: pointer;
      transition: .15s ease;
      &.AddtoCart, &.AddtoWatchlist {
        position: absolute;
        width: 50px;
        height: 50px;
        svg {
          position: absolute;
          width: 25px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -40%);
          &.icon {
            path, circle {
              fill: var(--color-gray-dark);
              transition: all .3s ease;
            }
          }
        }
      }
      &.AddtoCart {
        right: 25px;
        bottom: 25px;
        border: 2px solid var(--color-gray-dark);
        border-radius: 50%;
        transform: translate(50%, 50%);
        &:hover {
          width: 60px;
          height: 60px;
        }
      }
      &.AddtoWatchlist {
        border: 0;
        opacity: 0.2;
        top: 0;
        left: 0;
        svg {
          width: 20px;
        }
        &:hover {
          opacity: 1;
        }
      }
    }
    &:hover {
      //background-color: var(--color-primary-blue);
      //margin: -40px 15px 20px;
      transform: translateY(-5px);
      margin-bottom: 5px;
      .product-image {
        box-shadow: 0 0 50px 0 rgba(24,23,21,0.35);
        //top: -35px;
      }
      .product-content {
        transform: translateY(-3px);
      }
    }
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console