:art: fixing wrong css rules on index

vue-theme/src/pages/index.vue

@@ -83,7 +83,7 @@ export default {
             await this.$store.dispatch('getAllPages', { sortType: null, params: null })
         }
         await this.$store.dispatch('getRandomPosts', ['episode', 'exhibition', 'event', 'artist', 'post'])
-        },
+    },
     methods: {
         firstPostOfType(type) {
             return Object.values(this[`all${convertTitleCase(type)}s`])[0]
@@ -125,89 +125,89 @@ export default {
     .page--index 
         > article 
             grid-gap: $ms--2 0
-            > section ul
-                display: grid
-                grid-template-columns: 
-                    49.5% 24.25% 24.25%
-                grid-template-rows: 
-                    48% 48%
-                gap: 2% 1%
-                li
-                    margin: 0
-                    min-height: 10em
-                    &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)
-                        p.excerpt
-                            -webkit-line-clamp: $card-line-clamp
-                        .featured-or-hero-image img
-                            max-height: calc($max-card-img-height / 2)
-                    /* n1 episode */
-                    &:nth-of-type(1)
-                        grid-column-start: 1
-                        grid-row-start: 1
-                        grid-row-end: 3
-                    /* n2 exhibition, n3 events */
-                    &:nth-of-type(2), &:nth-of-type(3)
-                        grid-column-start: 2
-                        grid-row-start: 1
-                    &:nth-of-type(3)
-                        grid-column-start: 3
-
-                    /* n4 artists, n5 posts */
-                    &:nth-of-type(4), &:nth-of-type(5)
-                        grid-column-start: 2
-                        grid-row-start: 2
-                    &:nth-of-type(5)
-                        grid-column-start: 3
-        &.max
-            /* Need some extra gap on wide pages */
-            padding: $ms--2 0
-            li .featured-or-hero-image img
-                max-height: $max-card-img-height
-        &.stickies
-            .post 
-                min-width: 24.25%
-            ul
-                &.flipped
+            > section
+                ul
+                    display: grid
                     grid-template-columns: 
-                        24.25% 24.25% 49.5% 
+                        49.5% 24.25% 24.25%
+                    grid-template-rows: repeat(2, 1fr)
+                    gap: 0 $ms--2
                     li
+                        margin: 0
+                        min-height: 10em
+                        &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)
+                            p.excerpt
+                                -webkit-line-clamp: $card-line-clamp
+                            .featured-or-hero-image img
+                                max-height: calc($max-card-img-height / 2)
+                        /* n1 episode */
                         &:nth-of-type(1)
-                            grid-row-end: 2
-                        &:nth-of-type(3)
                             grid-column-start: 1
-                            grid-row-start: 2
-                        &:nth-of-type(5)
                             grid-row-start: 1
                             grid-row-end: 3
-                &[class^="sticky-"]
-                    display: flex
-                &.sticky-1
-                    > li .card--info 
-                        display: flex
-                        > a:first-of-type
-                            width: 100%
-                &.sticky-5
-                    grid-template-columns: 
-                        24.25% 24.25% 49.5%
-                    grid-template-rows: 
-                        48% 48%
-                    gap: 3% 1%
-                    > li
-                        &:nth-of-type(1)
-                            grid-row-end: 2
-                        &:nth-of-type(2)
+                        /* n2 exhibition, n3 events */
+                        &:nth-of-type(2), &:nth-of-type(3)
                             grid-column-start: 2
                             grid-row-start: 1
-                            grid-row-end: 2
                         &:nth-of-type(3)
-                            grid-column-start: 1
-                            grid-row-start: 2
-                            margin: 0 0 8% 0
-                        &:nth-of-type(4)
+                            grid-column-start: 3
+
+                        /* n4 artists, n5 posts */
+                        &:nth-of-type(4), &:nth-of-type(5)
                             grid-column-start: 2
                             grid-row-start: 2
-                            margin: 0 0 8% 0
                         &:nth-of-type(5)
                             grid-column-start: 3
-                            margin: 0 0 4% 0
+            &.max
+                /* Need some extra gap on wide pages */
+                padding: $ms--2 0
+                li .featured-or-hero-image img
+                    max-height: $max-card-img-height
+            &.stickies
+                .post 
+                    min-width: 24.25%
+                ul
+                    &.flipped
+                        grid-template-columns: 
+                            24.25% 24.25% 49.5% 
+                        li
+                            &:nth-of-type(1)
+                                grid-row-end: 2
+                            &:nth-of-type(3)
+                                grid-column-start: 1
+                                grid-row-start: 2
+                            &:nth-of-type(5)
+                                grid-row-start: 1
+                                grid-row-end: 3
+                    &[class^="sticky-"]
+                        display: flex
+                    &.sticky-1
+                        > li .card--info 
+                            display: flex
+                            > a:first-of-type
+                                width: 100%
+                    &.sticky-5
+                        grid-template-columns: 
+                            24.25% 24.25% 49.5%
+                        grid-template-rows: 
+                            repeat(2, 1fr)
+                        gap: 3% 1%
+                        > li
+                            &:nth-of-type(1)
+                                grid-row-end: 2
+                            &:nth-of-type(2)
+                                grid-column-start: 2
+                                grid-row-start: 1
+                                grid-row-end: 2
+                            &:nth-of-type(3)
+                                grid-column-start: 1
+                                grid-row-start: 2
+                                margin: 0 0 8% 0
+                            &:nth-of-type(4)
+                                grid-column-start: 2
+                                grid-row-start: 2
+                                margin: 0 0 8% 0
+                            &:nth-of-type(5)
+                                grid-column-start: 3
+                                margin: 0 0 4% 0
 </style>