my-app/src/components/booking/BookingCard.module.css

@@ -1,6 +1,8 @@
 .cardWrapper {
 	width: 100%;
 	transition: var(--transition-medium);
+	/*max-width: 400px;*/
+	flex: 1;
 }
 
 .card {

my-app/src/components/booking/BookingsList.module.css

@@ -1,13 +1,16 @@
 .bookingsListContainer {
 	padding-bottom: var(--spacing-3xl);
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
+	flex-wrap: wrap;
 }
 
 .bookingsContainer {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-sm);
+	width: 100%;
+	display: grid;
+  grid-template-columns: repeat(2, 1fr);
+	flex-wrap: wrap;
+	column-gap: 2rem;
 }
 
 .message {
@@ -67,6 +70,9 @@
 
 .dateGroup {
 	margin-bottom: 2rem;
+	flex: 1;
+	min-width: 250px;
+	max-width: 500px;
 }
 
 .dateGroup:last-child {
@@ -74,6 +80,7 @@
 }
 
 .dateHeader {
+	width: fit-content;
 	font-size: 0.875rem;
 	font-weight: 600;
 	color: #9ca3af;
@@ -81,4 +88,14 @@
 	letter-spacing: 0.05em;
 	margin: 0 0 0.25rem 0;
 	padding: 0;
+}
+
+@media screen and (max-width: 768px) {
+	.bookingsContainer {
+		grid-template-columns: 1fr;
+	}
+	
+	.dateGroup {
+		max-width: 100%;
+	}
 }