Swiperjs isn't working with my css grid on nextjs - reactjs

Question

I'm trying to do an about page and i need 3 sets of elements inside a vertical slider, so i picked swiperjs. Without the carousel, they were working just fine as far as the grid goes, but now the columns are extremely tall and the elements aren't in their correct rows. Here's how it looks on the jsx
<container className = {styles.sobreGeral}>
<div className={styles.parent}>
<Swiper
direction={"vertical"}
pagination={{clickable: true,}}
modules={[Pagination]}
>
<SwiperSlide>
<div className={styles.div1}>
<img src="sobre.jpg" alt="alt" className={styles.imagem} />
</div>
<div className={styles.div2}>
<img src="logo-sobre.jpg" alt="logo" className={styles.imagem} />
</div>
<div className={styles.div3}>
<p>text</p>
</div>
</SwiperSlide>
<SwiperSlide>
<div className={styles.div1}>
<img src="sobre-rita.jpg" alt="pic" className={styles.imagem} />
</div>
<div className={styles.div2}>
<h2>Rita </h2>
</div>
<div className={styles.div3}>
<p>text</p>
</div>
</SwiperSlide>
<SwiperSlide>
<div className={styles.div1}>
<img src="sobre-jose.jpg" alt="pic" className={styles.imagem} />
</div>
<div className={styles.div2}>
<h2>Jose </h2>
</div>
<div className={styles.div3}>
<p>text</p>
</div>
</SwiperSlide>
</Swiper>
</div>
</container>
}
and here's how the css is setup
.sobreGeral{
display: flex;
margin-top: 150px;
}
.contato{
display: flex;
justify-content: center;
}
.parent {
display: grid;
grid-template-columns: repeat(9, 1fr);
width: 100%;
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 {
grid-area: 2 / 3 / 6 / 6;
max-width: fit-content;
padding-left: 10%;
}
.div2 {
grid-area: 2 / 6 / 4 / 11;
max-width: fit-content;
}
.div3 {
grid-area: 4 / 6 / 6 / 8;
}
without the swiper, things were in their proper places, but as it is it's not working