SwiperJS causing issues with bootstrap grid - html

Question

Im trying to combine Swiper and Bootstrap; trying to make each item in a Bootstrap grid have a paginator for some text. The issue I'm having is that the columns are for some reason all taking 100% width.
Using bootstrap 5
var swiper = new Swiper(".swiper1", {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
var swiper = new Swiper(".swiper2", {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
var swiper = new Swiper(".swiper3", {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
.past-projects {
margin-top: 100px;
}
.past-projects h1 {
margin-bottom: 20px !important;
}
.past-projects .row .project {
width: 300px;
}
.past-projects .row .project img {
width: 100%;
height: 60%;
border-radius: 8px;
border: 3px solid #4b4b4b;
}
.past-projects .row .project .text {
text-align: center;
margin-top: 3px;
width: 100%;
display: block;
color: white;
}
.discord {
margin-top: 50px;
color: white;
text-align: center;
}
.discord a {
margin-top: 20px !important;
margin-right: 10px !important;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
color: white;
text-align: center;
font-size: 18px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.swiper {
margin-left: auto;
margin-right: auto;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="bg-dark">
<div class="past-projects">
<h1 class="ps-1 text-white mx-auto text-center">Past Projects</h1>
<div class="row g-4">
<div class="col">
<div class="project mx-auto">
<img src="https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc=" alt="">
<div class="text">
<p class="title">BloxRoyale</p>
<div class="swiper swiper1">
<div class="swiper-wrapper">
<p class="swiper-slide">ENG SLO GR</p>
<p class="swiper-slide">SP RU FP</p>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
<div class="col">
<div class="project mx-auto">
<img src="https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc=" alt="">
<div class="text">
<p class="title">BloxRoyale</p>
<div class="swiper swiper2">
<div class="swiper-wrapper">
<p class="swiper-slide">ENG SLO GR</p>
<p class="swiper-slide">SP RU FP</p>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="project mx-auto">
<img src="https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc=" alt="">
<div class="text">
<p class="title">BloxRoyale</p>
<div class="swiper swiper3">
<div class="swiper-wrapper">
<p class="swiper-slide">ENG SLO GR</p>
<p class="swiper-slide">SP RU FP</p>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

var swiper = new Swiper(".mySwiper", {
loop: true,
spaceBetween:24,
grabCursor: true,
pagination: {
el: ".swiper-pagination",
dynamicBullets: true,
},
breakpoints: {
768: {
slidesPerView: 1,
},
1024: {
slidesPerView: 3,
spaceBetween: 48,
},
},
});