<div class="container">
    <div class="row">
        <div class="swiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper card-container">
                <!-- Slides -->
                <div class="swiper-slide card">
                    <div class="img-container">
                        <img src="https://images.unsplash.com/photo-1610986602726-19f650133f7a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fGZyb250ZW5kJTIwZGV2ZWxvcG1lbnR8ZW58MHx8MHx8fDA%3D" alt="">
                    </div>
                    <div class="card-content">
                        <h2>Wat kan je verwachten op je eerste dag?</h2>
                        <small class="tags">Introductie</small>
                        <div class="hover-content">
                            <a href="#">Lees artikel </a>
                        </div>

                    </div>

                </div>
                <div class="swiper-slide card">
                    <div class="img-container">
                        <img src="https://images.unsplash.com/photo-1435527173128-983b87201f4d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8d29yayUyMHNjaGVkdWxlfGVufDB8fDB8fHww" alt="">
                    </div>
                    <div class="card-content">
                        <h2>Lunchrooster en keukenrooster</h2>
                        <small class="tags">Rooster</small>
                        <div class="hover-content">
                            <a href="#">Lees artikel </a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide card">
                    <div class="img-container">
                        <img src="https://images.unsplash.com/photo-1552581234-26160f608093?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8dGVhbSUyMG1lZXRpbmd8ZW58MHx8MHx8fDA%3D" alt="">
                    </div>
                    <div class="card-content">
                        <h2>Wie zijn jouw nieuwe collega's?</h2>
                        <small class="tags">Introductie</small>
                        <div class="hover-content">
                            <a href="#">Lees artikel </a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide card">
                    <div class="img-container">
                        <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHRlYW0lMjBtZWV0aW5nfGVufDB8fDB8fHww" alt="">
                    </div>
                    <div class="card-content">
                        <h2>Standup, planningmeeting en nog meer</h2>
                        <small class="tags">Team meeting</small>
                        <div class="hover-content">
                            <a href="#">Lees artikel </a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide card">
                    <div class="img-container">
                        <img src="https://images.unsplash.com/photo-1506784983877-45594efa4cbe?q=80&w=2068&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                    </div>
                    <div class="card-content">
                        <h2>Hoe kan je je uren registreren?</h2>
                        <small class="tags">Introductie</small>
                        <div class="hover-content">
                            <a href="#">Lees artikel </a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide card">
                    <div class="img-container">
                        <img src="https://images.unsplash.com/photo-1590402494562-4b788beb429e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE5fHx8ZW58MHx8fHx8" alt="">
                    </div>
                    <div class="card-content">
                        <h2>Wat kan je verwachten op je eerste dag?</h2>
                        <small class="tags">Introductie</small>
                        <div class="hover-content">
                            <a href="#">Lees artikel </a>
                        </div>
                    </div>
                </div>

            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- If we need scrollbar -->

        </div>

    </div>
</div>

$background: #f5f5f5;
$box-shadow: 0px 4px 23px 0px rgba(82, 138, 180, 0.25);

html,
* {
    font-size: 62.5%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "lato", sans-serif;
}
h2 {
    font-size: 2rem;
    font-weight: 600;
    padding: 0.5rem 0;
}

a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    background: #d20056;
    padding: 1.5rem;
    min-width: 25rem;
    margin: 0.5rem 0;
    border-radius: 1.1rem;
    text-align: center;
    font-weight: 500;
}
body {
    font-size: 1.6rem;
    background: $background;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

   
    .card-container {
       
        width: 100%;
       

        .card {
            overflow: hidden;
            width: 100%;
            // height: 42rem;
            border-radius: 2.4rem;
            box-shadow: $box-shadow;
            padding: 0;

            .card-content {
                position: absolute;
                bottom: 0;
                width: 100%;
                background: white;
                padding: 1.6rem;
                transform: translateY(10rem);
                background: white;
                transition: all 0.5s ease-in-out;
            }

            .tags {
                display: inline-block;
                background: #d2ebe1;
                padding: 0.5rem;
                border-radius: 0.5rem;
            }
            .hover-content {
                margin: 2rem 0;
            }
        }
    }
}

.img-container {
    width: 100%;
    height: 100%;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.5s ease-in-out;
    }
}
// Hover effect if you hover on the card
.card {
    &:hover {
        img {
            transform: scale(1.1);
            filter: blur(0.2rem);
        }
        .card-content {
            transform: translatey(0);

            &:hover {
                transform: translatey(0);
            }
        }
    }
}

.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right {
    background-image: none;
}

.swiper-slide-active {
    border-bottom: 0.5rem solid #d20056;
}

.swiper-button-prev,
.swiper-button-next {
}

const swiper = new Swiper(".swiper", {
    // Optional parameters
    direction: "horizontal",
    loop: true,
    centeredSlides: true,
    grabCursor: true,
    spaceBetween: 15,
    slidesPerView: 1.5,
  

    

    // Navigation arrows
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    }

    // And if we need scrollbar
});