Design adjustments, new content and more

assets/css/templates/album.css

@@ -1,57 +1,15 @@
-.album-cover {
-  position: relative;
-  line-height: 0;
-  margin-bottom: 6rem;
-  background: #000;
-  padding-bottom: 75%;
-}
-.album-cover figcaption {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: 0;
-  background: rgba(0,0,0, .5);
-  text-align: center;
-  color: #fff;
-  line-height: 1;
-  padding: 1.5rem;
-}
-.album-cover img {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.album-cover h1 {
-  font-size: 3rem;
-}
-.album-text {
-  max-width: 40rem;
-  margin: 0 auto 6rem;
-  text-align: center;
-}
 .album-gallery {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  align-items: center;
-  margin: 0 auto;
-  grid-gap: 1rem;
-  max-width: calc(var(--content-width) - 15rem);
-  justify-content: center;
+  line-height: 0;
+  columns: 1;
+  column-gap: 1.5rem;
 }
-.album-gallery[data-even] {
-  grid-template-columns: repeat(4, 1fr);
+.album-gallery li {
+  display: block;
+  margin-bottom: 1.5rem;
+  break-inside: avoid;
 }
-.album-gallery[data-count="1"] {
-  grid-template-columns: 1fr;
-}
-.album-gallery[data-count="2"] {
-  grid-template-columns: 1fr 1fr;
+@media screen and (min-width: 60rem) {
+  .album-gallery {
+    columns: 2;
+  }
 }