diff --git a/src/partials/general-container.html b/src/partials/general-container.html
index 3c48ece2041e7f9aa5b784c8e3c41153a93d2a7c..ad9616a5f26580b16f3b76904401068591e3c697 100644
--- a/src/partials/general-container.html
+++ b/src/partials/general-container.html
@@ -1,74 +1,92 @@
-<section class="general-page">
- <div class="container movies">
- <div class="movie">
- <div class="movie__cover-inner">
- <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
- <div class="movie__info">
- <p class="movie__title">Green Book</p>
- <p class="movie__category">Drama, Action</p>
- <p class="movie__year">2020</p>
- </div>
+<section class="container movies">
+ <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
</div>
</div>
- <div class="movie">
- <div class="movie__cover-inner">
- <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
- <div class="movie__info">
- <p class="movie__title">Green Book</p>
- <p class="movie__category">Drama, Action</p>
- <p class="movie__year">2020</p>
- </div>
+ </div>
+ <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
</div>
</div>
- <div class="movie">
- <div class="movie__cover-inner">
- <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
- <div class="movie__info">
- <p class="movie__title">Green Book</p>
- <p class="movie__category">Drama, Action</p>
- <p class="movie__year">2020</p>
- </div>
+ </div>
+ <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
</div>
</div>
- <div class="movie">
- <div class="movie__cover-inner">
- <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
- <div class="movie__info">
- <p class="movie__title">Green Book</p>
- <p class="movie__category">Drama, Action</p>
- <p class="movie__year">2020</p>
- </div>
+ </div>
+ <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
</div>
</div>
- <div class="movie">
- <div class="movie__cover-inner">
- <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
- <div class="movie__info">
- <p class="movie__title">Green Book</p>
- <p class="movie__category">Drama, Action</p>
- <p class="movie__year">2020</p>
- </div>
+ </div>
+ <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
</div>
</div>
- <div class="movie">
- <div class="movie__cover-inner">
- <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
- <div class="movie__info">
- <p class="movie__title">Green Book</p>
- <p class="movie__category">Drama, Action</p>
- <p class="movie__year">2020</p>
- </div>
+ </div>
+ <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
</div>
</div>
- <div class="movie">
- <div class="movie__cover-inner">
- <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
- <div class="movie__info">
- <p class="movie__title">Green Book</p>
- <p class="movie__category">Drama, Action</p>
- <p class="movie__year">2020</p>
- </div>
+ </div>
+ <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
</div>
</div>
</div>
+ <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
+ </div>
+ </div>
+ </div>
+ <!-- <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
+ </div>
+ </div>
+ </div> -->
</section>
\ No newline at end of file
diff --git a/src/sass/_general-container.scss b/src/sass/_general-container.scss
index d404020d1b63dc633364f338264c29a87176a386..1e1a93ed848d30ff2e73e8c11c6249009ed8cc86 100644
--- a/src/sass/_general-container.scss
+++ b/src/sass/_general-container.scss
@@ -3,13 +3,13 @@
max-height: 398px;
border-radius: 5px;
@media screen and (min-width: 767px){
- max-width: 336px;
- max-height: 455px;
+ min-width: 336px;
+ min-height: 455px;
}
@media screen and (min-width: 1024px){
- max-width: 309px;
- max-height: 489px;
+ min-width: 309px;
+ min-height: 489px;
}
}
@@ -21,13 +21,56 @@ flex-direction: column;
display: flex;
flex-wrap: wrap;
flex-direction: unset;
-
}
-
+@media screen and (min-width: 1024px){
+ display: flex;
+
+}
}
.movie{
-margin: auto;
+margin-left: auto;
+margin-right: auto;
+margin-bottom: 21px;
+@media screen and (min-width: 767px){
+margin-right: 16px;
+margin-left: 0px;
+}
+@media screen and (min-width: 1024px){
+margin: 0px;
+}
+}
+
+
+.movie:nth-child(even){
+ @media screen and (min-width: 767px){
+ margin-left: 16px;
+ margin-right: 0px;
+ }
+ @media screen and (min-width: 1024px){
+ margin: 0;
+ }
+}
+.movie:nth-child(odd){
+ @media screen and (min-width: 767px) {
+ margin-left: 0px;
+ margin-right: 16px;
+ }
+ @media screen and (min-width: 1024px){
+margin: 0;
+ }
+}
+
+.movie:nth-child(3n+2){
+ @media screen and (min-width: 1024px) {
+ margin-left: 16px;
+ margin-right: 16px;
+ }
}
-.movie__cover-inner{
-}
\ No newline at end of file
+// .movie:last-child {
+// @media screen and (min-width: 767px){
+// margin-left: 0px;
+// }
+
+// }
+