#11 all swiper-slide same height

package.json

@@ -50,7 +50,7 @@
 		"react-router-dom": "^6.4.0",
 		"react-scripts": "^5.0.1",
 		"sass": "^1.54.9",
-		"swiper": "^8.4.2",
+		"swiper": "^11.0.6",
 		"typescript": "^4.9.5"
 	},
 	"devDependencies": {

src/components/projects/ProjectsList.tsx

@@ -13,9 +13,9 @@ export default function ProjectsList() {
 	return (
 		<Swiper>
 			{projects?.map(project => (
-				<SwiperSlide key={project.id}>
-					<Grid item key={project.title} xs={12} sm={9} md={6}>
-						<Card sx={{p: "1rem"}}>
+				<SwiperSlide key={project.id} style={{padding: ".1rem", maxWidth: "28rem", height: "auto"}}>
+					<Grid item key={project.title} xs={12} sm={9} md={6} height="100%">
+						<Card sx={{p: "1rem", height: "100%", display: "flex", flexDirection: "column"}}>
 							<Image
 								src={`/media/project/${project.id}.webp`}
 								alt={`${t("project.imageAlt")} ${project.title}`}

src/components/services/ServicesList.tsx

@@ -12,9 +12,9 @@ export default function ServicesList() {
 	return (
 		<Swiper>
 			{services.map(service => (
-				<SwiperSlide key={service.id}>
-					<Grid item key={service.title} xs={12} sm={9} md={6}>
-						<Card sx={{p: "1rem", backgroundColor: "background.default"}}>
+				<SwiperSlide key={service.id} style={{padding: ".1rem", maxWidth: "28rem", height: "auto"}}>
+					<Grid item key={service.title} xs={12} sm={9} md={6} height="100%">
+						<Card sx={{p: "1rem", height: "100%", display: "flex", flexDirection: "column"}}>
 							<Image
 								src={`/media/service/${service.id}.webp`}
 								alt={`${t("service.imageAlt")} ${service.title}`}
@@ -41,7 +41,7 @@ export default function ServicesList() {
 									))}
 								</ul>
 							</CardContent>
-							<CardActions>
+							<CardActions sx={{marginTop: "auto"}}>
 								<Button fullWidth variant={"outlined"} href={service.href}>
 									{t("service.learnMore")}
 								</Button>

src/components/swiper/Swiper.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Autoplay, Mousewheel, Navigation, Pagination } from "swiper";
+import { Autoplay, Mousewheel, Navigation, Pagination } from "swiper/modules";
 import { Swiper as ReactSwiper } from "swiper/react";
 
 type Props = {
@@ -16,7 +16,6 @@ export default function Swiper({children}: Props) {
 			mousewheel={true}
 			autoplay={{delay: 10000, disableOnInteraction: false}}
 			modules={[Mousewheel, Autoplay, Pagination, Navigation]}
-			className="services-carousel"
 		>
 			{children}
 		</ReactSwiper>

src/styles/main.sass

@@ -19,10 +19,6 @@ main
 	padding-left: .5rem
 	padding-right: .5rem
 
-/* ********************************************* swiper ********************************************* */
-.swiper-slide
-	max-width: 25rem
-
 /* ********************************************* footer ********************************************* */
 footer
 	a