<div class="row">
	<div class="swiper-container teaserSwiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div>
					<p class="h2">Elefanten</p>
					<p>Elefanten sind die größten noch lebenden Landtiere. Signifikante Merkmale sind neben dem Rüssel vor allem bei erwachsenen Tieren die beiden Stoßzähne des Oberkiefers und der horizontale Zahnwechsel.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn">Mehr Info</a>
				</div>
			</div>
			<div class="swiper-slide">
				<div>
					<p class="h2">Füchse</p>
					<p>Ein Fuchs ist ein Vertreter der Familie der Hunde (Canidae). Im deutschen Sprachgebrauch ist damit meistens der Rotfuchs gemeint.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn">Mehr Info</a>
				</div>
			</div>
			<div class="swiper-slide">
				<div>
					<p class="h2">Schmetterlinge</p>
					<p>Die deutsche Bezeichnung „Schmetterling“, 1501 erstmals belegt, kommt vom slawischstämmigen ostmitteldeutschen Wort Schmetten (das heißt Schmand, Rahm), von dem einige Arten oft angezogen werden.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn white">More Information</a>
				</div>
			</div>
			<div class="swiper-slide">
				<div>
					<p class="h2">Rehe</p>
					<p>Das Reh besiedelte ursprünglich Waldrandzonen und -lichtungen. Es hat sich aber erfolgreich eine Reihe sehr unterschiedlicher Habitate erschlossen und kommt mittlerweile auch in offener, fast deckungsloser Agrarsteppe vor.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn">Mehr Info</a>
				</div>
			</div>
			<div class="swiper-slide">
				<div>
					<p class="h2">Tauben</p>
					<p>Tauben ernähren sich überwiegend von pflanzlicher Nahrung, die von den meisten Arten unzerteilt verschluckt wird.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn">Mehr Info</a>
				</div>
			</div>
			<div class="swiper-slide">
				<div>
					<p class="h2">Hunde</p>
					<p>Der Haushund (Canis lupus familiaris) ist ein Haustier und wird als Heim- und Nutztier gehalten. Seine wilde Stammform ist der Wolf, dem er als Unterart zugeordnet wird.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn">Mehr Info</a>
				</div>
			</div>
		</div>
		<div class="swiper-pagination"></div>
	</div>
</div>

// If you want to use these two mixins set them in a seperated mixins.scss

@mixin row {
	margin-left: auto;
	margin-right: auto;
	max-width: rem($rowMaxWidth);
	width: 100%;
	height: auto;
	position: relative;
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
}

@mixin col4 {
	width: 100%;
	max-width: calc(33.33333% - #{rem($baseGap*2)});
	flex-basis: calc(33.33333% - #{rem($baseGap*2)});
	margin: rem($baseGap);
	display: inline-block;
	transition: 300ms all;
	box-sizing: border-box;
}

// ------------------------------------------------------------

// Mobile Teaser Slider / Desktop Simple Text Teaser (No Slider)
.teaser1 {
	background: $dark;
	overflow: hidden;
	padding-top: rem(60px);

	@include breakpoint(large) {
		padding-top: rem(100px);
	}

	.row {
		.teaserSwiper {	
			@include breakpoint(large) {
				width: 100%;
			}

			.swiper-wrapper {
				@include breakpoint(large) {
					@include row; // requires mixin
				}
			
				.swiper-slide {
					height: auto; // auto = all same height || 100% = Element height
					background: $light;

					@include breakpoint(large) {
						@include col4; // requires mixin
					}

					> div {	
						position: relative;
						display: block;
						padding: rem(60px) rem($baseGap);
					}

					&:hover {
						@include breakpoint(large) {
							background: $secondary;
						}
					}
				}
			}

			.swiper-pagination {
				@include breakpoint(large) {
					display: none;
				}
			}
		}
	}
}

function teaserSwiper() {

    var destroySwiper = false;

    var teaserSwiper = new Swiper('.swiper-container.teaserSwiper', {
        speed: 500,
        grabCursor: true,
        loop: true,
        centeredSlides: true,
        slidesPerView: 1.5,
        spaceBetween: 20,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },
        breakpoints:
        {
            // if window width is <= 479px
            479: {
                slidesPerView: 1.2,
            },
            // if window width is <= 639px
            639: {
                slidesPerView: 1.5,
            },
            // if window width is <= 991px
            991: {
                slidesPerView: 2.1,
            },
        }
    });
    // Destroy or Init Swiper
    swiper_init = function(init)
    {
        if (breakpoint('large') && teaserSwiper.params.init && !init)
        {
            teaserSwiper.destroy(false, true);
            teaserSwiper.params.init = false;
        }
        else if (!breakpoint('large') && !teaserSwiper.params.init && !init)
        {
            teaserSwiper.params.init = true
            teaserSwiper.init();
        }
        else if (!breakpoint('large') && init)
        {
            teaserSwiper.init();
        }
    };
    swiper_init(destroySwiper, true);

    window.addEventListener('resize', function()
    {
        swiper_init(false);
    });
}

teaserSwiper();