body[data-load="false"] main[data-barba-namespace="archive"] ul,
body[data-load="false"] main[data-barba-namespace="categories"] ul {transform: translateY(100vh);}

main[data-barba-namespace="archive"] ul,
main[data-barba-namespace="categories"] ul {
    position: fixed;
    top: var(--header_height);
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0;
    padding-bottom: calc(100vh - var(--header_height) - 80px); /* Window Height - Header Height - Item height so there's an item left on the end of the scroll*/
    z-index: 10;
}
@media only screen and (min-width: 1024px) {
    main[data-barba-namespace="archive"] ul,
    main[data-barba-namespace="categories"] ul {
        top: calc(var(--header_height) - 8px);
        padding-bottom: calc(100vh - var(--header_height) - 16px); /* Window Height - Header Height - Item height so there's an item left on the end of the scroll*/
    }
}

@media (hover: hover) {
    main[data-barba-namespace="archive"] ul:hover li p,
    main[data-barba-namespace="categories"] ul:hover li p {opacity: .25;}
    main[data-barba-namespace="archive"] ul li:hover p,
    main[data-barba-namespace="categories"] ul li:hover p {opacity: 1;}
}
@media (hover: none) {
    main[data-barba-namespace="archive"] ul li,
    main[data-barba-namespace="categories"] ul li {opacity: .5;}

    main[data-barba-namespace="archive"] ul li.--active,
    main[data-barba-namespace="categories"] ul li.--active {opacity: 1;}
}

main[data-barba-namespace="archive"] a > *,
main[data-barba-namespace="categories"] a > * {grid-column: 1/-1;}
@media only screen and (min-width: 1024px) {
    main[data-barba-namespace="archive"] a,
    main[data-barba-namespace="categories"] a {display: grid !important;}
    main[data-barba-namespace="archive"] a,
    main[data-barba-namespace="categories"] a {padding: .2rem 0;}

    main[data-barba-namespace="archive"] a p,
    main[data-barba-namespace="categories"] a p {
        text-align: left;
        grid-row: 1;
    }
    main[data-barba-namespace="archive"] a p:nth-child(1),
    main[data-barba-namespace="categories"] a p:nth-child(1) {grid-column: 1/5;}
    main[data-barba-namespace="archive"] a p:nth-child(2),
    main[data-barba-namespace="categories"] a p:nth-child(2) {grid-column: 7/8}
    main[data-barba-namespace="archive"] a p:nth-child(3),
    main[data-barba-namespace="categories"] a p:nth-child(3) {grid-column: 5/7}
    main[data-barba-namespace="archive"] a p:nth-child(4),
    main[data-barba-namespace="categories"] a p:nth-child(4) {grid-column: 8/9}
}