#things { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.5rem; row-gap: 0.5rem; } .profile { display: inline-block; border: 1px solid var(--text-dim); padding: 0.5rem; } @media (max-width: 38rem) { #things { display: flex; flex-direction: column; } } .profile-heading { display: grid; grid-template-columns: min-content 1fr; column-gap: 0.5rem; } .profile-heading img { aspect-ratio: 1 / 1; width: 5rem; height: 5rem; grid-row: 1 / 3; } .profile-heading h2 { grid-column: 2; align-self: flex-end; font-weight: normal; } .profile-heading h2>a { color: inherit; text-decoration: underline; text-decoration-skip-ink: all; text-decoration-style: dotted; } .profile-heading h3 { grid-column: 2; font-style: italic; font-weight: normal; text-align: right; } .profile p { margin: 1rem 0 0 0; }