implement some image resizing (todo: implement in whole website)

fix/improve css
change arrow-fade mode

assets/css/screen.css

@@ -21,28 +21,25 @@ a {
 }
 
 h1, h2, h3, h4, h5, h6 {
+  margin: 0;
   font-family: 'Montserrat', sans-serif;
   font-weight: 800;
 	color: rgb(230, 230, 230);
 }
 
 h2 {
-  margin: 38px 0 0;
   font-size: 35px;
 }
 
 h3 {
-  margin: 0;
   font-size: 28px;
 }
 
 h4 {
-  margin: 0;
   font-size: 24px;
 }
 
 h5 {
-  margin: 0;
   font-size: 20px;
 }
 
@@ -254,69 +251,170 @@ nav.mind-site-footer_nav {
 }
 
 /* Begin Ghost mandatory CSS */
-.kg-width-wide {
 
-}
+  /* Begin images
 
-.kg-width-full {
+  [structure]
+  class ".kg-card" is applied to all cards!
 
-}
+  class ".kg-image" is applied to all images.
+  class ".kg-image-card" is applied to all image containers (includes description)
 
-.kg-gallery-container {
+  there are 3 sizes:
+    - normal
+    - wide (class ".kg-width-wide")
+    - full (class ".kg-width-full")
+
+  if an image has a description, class ".kg-card-hascaption" is applied to the container.
+  */
+
+  .kg-card {
+    padding: 20px 0 20px;
+  }
+
+  .kg-image {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .kg-image-card img {
+      border-radius: 5px;
+  }
+
+  .kg-image-card {
+    margin: 0 40px;
+  }
+
+  .kg-width-wide {
+    margin: 0;
+  }
+
+  .kg-width-full {
+    margin: 0 -60px;
+  }
+
+  .kg-width-full img {
+    border-radius: 0;
+  }
+
+  .kg-card-hascaption figcaption {
+    padding: 0 20px 0;
+    font-style: italic;
+    font-size: 18px;
+    line-height: 1em;
+    color: rgb(150, 150, 150);
+  }
+
+  /* End images */
+
+  /* Begin Bookmarks */
 
 
-}
-.kg-gallery-image {
+  .kg-bookmark-card {
+    margin: 0;
+  }
 
-}
+  .kg-bookmark-container {
+    display: flex;
+    min-height: 148px;
+    border: 1px solid rgb(80, 80, 80);
+    border-radius: 5px;
+    transition: .3s;
+  }
 
-.kg-gallery-row {
+  .kg-bookmark-container:hover {
+  	transform:translate3d(0,-3px,0);
+  	box-shadow: 0 0 3px rgb(0,0,0),0 3px 10px rgb(0,0,0);
+  }
 
-}
+  .kg-bookmark-content {
+    display: flex;
+    flex-direction: column;
+    padding: 20px 20px 0;
+    color: white;
+  }
 
-.kg-bookmark-card {
+  .kg-bookmark-title {
+    font-size: 15px;
+    font-weight: 700;
 
-}
+  }
 
-.kg-bookmark-container {
+  .kg-bookmark-description {
+    margin-top: 12px;
+    max-height: 48px;
+    font-size: 14px;
 
-}
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
 
-.kg-bookmark-content {
+  }
 
-}
+  .kg-bookmark-metadata {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    margin-top: auto;
 
-.kg-bookmark-title {
+  }
 
-}
+  .kg-bookmark-icon {
+    width: 22px;
+    height: 22px;
+    margin-right: 10px;
 
-.kg-bookmark-description {
+  }
 
-}
+  .kg-bookmark-author {
 
-.kg-bookmark-metadata {
+  }
 
-}
+  .kg-bookmark-publisher {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 12px;
 
-.kg-bookmark-icon {
+  }
 
-}
+  .kg-bookmark-thumbnail {
+    font-size: 0;
+    max-height: 100%;
+    min-width: 33%;
+  }
 
-.kg-bookmark-author {
+  .kg-bookmark-thumbnail img {
+    border-radius: 0 5px 5px 0;
+    object-fit: cover;
+    height: 157px;
+    width: 100%;
+  }
 
-}
+  /* End Bookmarks */
 
-.kg-bookmark-publisher {
+  /* Begin Gallery */
+  .kg-gallery-container {
+    margin: 0 -40px;
+  }
 
-}
+  .kg-gallery-row {
+    display: flex;
+    justify-content: center;
+  }
 
-.kg-bookmark-thumbnail {
+  .kg-gallery-image {
+    margin: 10px 10px;
+  }
+  .kg-gallery-image img {
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+  }
 
-}
-
-.kg-image {
-  max-width: 100%;
-}
+  /* End Gallery */
 /* End Ghost mandatory CSS */
 
 /* Generic class to make things unselectable */