[newclass=".nullelem"] } .collection { margin: 0 auto; background-color: transparent; width: calc(100% - 3em); max-width: 100%; padding: 1.5em; font: 13px 'Jost'; text-align: justify; display: flex; flex-direction: row-reverse; flex-wrap: nowrap; justify-content: space-between; } /* Cover image */ .collection .cover { width: 60%; max-width: 650px; height: 350px; background-size: cover; align-self: flex-end; margin-top: 15em; } .collection .cover.eve { background-image: url('https://i.pinimg.com/564x/29/f9/49/29f94914af07c9484c725202f4aa8c25.jpg'); background-position: 50% 15%; } /* Index Title */ .collection .info { width: 3em; align-self: flex-end; padding: 0; margin: 0; transform: translate(-3.5em, -1.0em); } .collection h1 { display: inline-block; font-size: 3.2em; font-family: 'Playfair Display'; font-weight: bold; text-align: right; padding: 0; margin: 0; whie-space: nowrap; overflow: show; } .collection .info div { white-space: nowrap; padding: 0; margin: 0; } .collection .info div b, .collection .info div a { text-transform: lowercase; font-variant: small-caps; font-weight: bold; font-size: 1.25em; color: var(--iconcolor); } .collection .info div { font: inherit; } /* Ordered List */ .collection ol { list-style-type: none; counter-reset: frame-counter; margin: 0; padding: 0; font-size: 1.1em; height: fit-content; z-index: 2; transform: translate(6em, 6em); } .collection, .collection div { display: relative; } .collection ol, .collection ol::before { width: 20em; } .collection div ol::before { content: ''; position: absolute; background-color: var(--hovericoncolor); height: calc(100% + 6em); top: -3em; left: -8em; z-index: -1; } .collection .list.hydra ol::before { background: var(--hydra); } .collection .list.cerberus ol::before { background: var(--cerberus); } .collection .list.sybaris ol::before { background: var(--sybaris); } .collection .list.pegasus ol::before { background: var(--pegasus); } .collection ol a, .collection ol a:hover, .collection ol li::before, .collection ol li::after { font: inherit; text-decoration: none; color: white; } .collection li { counter-increment: frame-counter; margin-bottom: 5px; } .collection li::before { display: inline-block; content: counter(frame-counter, decimal-leading-zero) "."; width: 1.75em; text-align: center; font-size: 1em; margin-right: 1em; } .collection ol li::marker { content: none; } .collection { cursor: default; } .collection a { cursor: pointer; } .collection ::selection { background: transparent; [/newclass][nospaces]