style: responsive cinema grid — 3 per row, 2 on tablets, 1 on mobile

1 files changed, 14 insertions, 0 deletions

diff --git a/resources/views/cinema.blade.php b/resources/views/cinema.blade.php
index bce68fa..84459a5 100644
--- a/resources/views/cinema.blade.php
+++ b/resources/views/cinema.blade.php
@@ -16,6 +16,20 @@ html {
 
 .movie-card {
 	flex: 1 1 0;
+	min-width: 0;
+	max-width: 33.333%;
+}
+
+@media (max-width: 991.98px) {
+	.movie-card {
+		max-width: 50%;
+	}
+}
+
+@media (max-width: 575.98px) {
+	.movie-card {
+		max-width: 100%;
+	}
 }
 
 .movie-card .poster {