Merge pull request #5 from maria-moroz/feature/general-container

Feature/general container

src/partials/general-container.html

+<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>
+    <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>
+    <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>
+    <!-- <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

src/sass/_general-container.scss

+.movie__cover{
+    max-width: 280px;
+    max-height: 398px;
+    border-radius: 5px;
+    @media screen and (min-width: 767px){
+            min-width: 336px;
+            min-height: 455px;
+
+    }
+    @media screen and (min-width: 1024px){
+        min-width: 309px;
+        min-height: 489px;
+ 
+    }
+}
+
+.movies{
+display: flex;
+flex-direction: column;
+@media screen and (min-width: 767px){
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: unset;
+}
+@media screen and (min-width: 1024px){
+    display: flex;
+ 
+}
+}
+.movie{
+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:last-child {
+//     @media screen and (min-width: 767px){
+// margin-left: 0px;
+//     }
+    
+// }
+