@import url(base.css); @layer { header { row-gap: 0; } header p { grid-area: 2/1/2/4; margin: 0; text-align: center; font-size: 1.5rem; font-weight: 600; font-stretch: 90%; } } @layer { .portrait { margin: 0; border: 4px solid currentcolor; box-shadow: var(--shadow); img { display: block; width: 200px; height: 200px; } } .char { width: 80%; margin-left: auto; margin-right: auto; padding-left: 1em; padding-right: 1em; display: grid; gap: 0.5em 2em; &:nth-of-type(odd) { grid-template: "portrait name" auto "portrait desc" 1fr / min-content auto; } &:nth-of-type(even) { grid-template: "name portrait" auto "desc portrait" 1fr / auto min-content; } .portrait { grid-area: portrait; } h2 { grid-area: name; margin: 0; } > div, p { grid-area: desc; align-self: start; } } } @layer { .char { margin-top: 2em; padding-top: 2em; border-top: 3px double currentcolor; } .char:last-of-type { padding-bottom: 2em; border-bottom: 3px double currentcolor; } h2 small { font-size: 70%; font-weight: 700; } }