site: small css fixes

- remove padding-bottom from main
- add some missing margin-bottom in components
- fix .media-metadata and .media-item size

public/css/style.css

@@ -188,7 +188,6 @@ main {
   margin-top: 0.1875rem;
   margin-bottom: 0.1875rem;
   padding-top: var(--vertical-unit);
-  padding-bottom: var(--vertical-unit);
 }
 
 [x-cloak] {
@@ -231,6 +230,10 @@ main {
   color: var(--accent);
 }
 
+.pager {
+  margin-bottom: var(--vertical-unit);
+}
+
 .pager > a,
 .pager > span {
   display: inline-block;
@@ -326,14 +329,17 @@ main {
   justify-content: center;
   align-items: flex-start;
   gap: var(--vertical-unit) var(--gallery-column-gap);
+  margin-bottom: var(--vertical-unit);
 }
 
 .media-metadata {
   flex: 1;
+  width: 25%;
 }
 
 .media-item {
   flex: 3;
+  width: 75%;
   line-height: 0;
 }
 
@@ -381,8 +387,8 @@ a.tag-kind-r:active {
   }
 
   .media { flex-direction: column-reverse; }
-  .media-metadata { flex: auto; }
-  .media-item { flex: auto; }
+  .media-metadata { flex: auto; width: 100%; }
+  .media-item { flex: auto; width: 100%; }
 }
 
 @media screen and (min-width: 60rem) {
@@ -399,8 +405,8 @@ a.tag-kind-r:active {
   }
 
   .media { flex-direction: row; }
-  .media-metadata { flex: 1; }
-  .media-item { flex: 3; }
+  .media-metadata { flex: 1; width: 25%; }
+  .media-item { flex: 3; width: 75%; }
 }
 
 @media screen and (min-width: 90rem) {