* { margin: 0; padding: 0 } html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #e8e8ea; font-family: "Newsreader", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: #1A1C1A; } .header { column-span:all; } .holder { display: flex; flex-direction: row; height: 100%; width: 100%; } h1 { font-size: 5rem; font-weight: 700; font-style: normal; } .regimg { max-width: 14em; max-height: 20em; height: auto; align-self: center; } .largeimage { width: auto; object-fit: cover; object-position: center; column-span: none; display: block; float: left; } .content { /* height: 100%; width: 100%; display: grid; gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); grid-auto-flow: column; */ height: 100%; width: 40em; min-width: 35em; column-count: 2; column-gap: 1em; column-rule: thin solid black; column-fill: auto; font-size: 1.5rem; } .item { padding: .2em; margin: .2em; }