+ AlbumCollection component; gallery style fix

src/style/components/album-collection.scss

@@ -0,0 +1,14 @@
+@import "../variables";
+
+.album-collection{
+  &__body{
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+    align-items:flex-end;
+  }
+
+  &__title{
+
+  }
+}

src/style/components/gallery-item.scss

@@ -1,14 +1,18 @@
 @import "../variables";
 
 $img-max-width: 500px;
+$double-margin-half: $double-margin / 2;
+$percentage: 25%;
+
+gallery-item {
+  width: $percentage;
+  padding: 0 $double-margin-half;
+  box-sizing: padding-box;
 
-.gallery-item {
-  width: calc(33% - #{$single-margin});
   margin-bottom: $single-margin;
 
-  img {
+  img{
     width: 100%;
-    max-width: $img-max-width;
   }
 }
 

src/style/gallery.scss

@@ -1,18 +0,0 @@
-@import "variables";
-
-.album-collection{
-
-}
-
-.album-collection__body{
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  align-items: flex-start;
-
-  margin-bottom: $double-margin;
-}
-
-.album-collection__title{
-
-}

src/style/style.scss

@@ -1,3 +1,4 @@
+@import "components/album-collection";
 @import "components/gallery-item";
 @import "components/document";
 @import "components/teacher-proifile";
@@ -15,7 +16,6 @@
 @import "content";
 @import "page-animation";
 
-@import "gallery";
 @import "docs";
 @import "document";
 @import "album";