.page.speakers { .hero { header, .description { padding: var(--space-4) var(--container-margin); } header { display: flex; align-items: center; .speaker-img { --size: 6rem; height: var(--size); min-width: var(--size); border-radius: 100%; background-size: cover; box-shadow: 0 0 var(--space-3) var(--darken-3); margin-right: var(--space-4); } h1 { margin: 0; padding: 0; } ul.socials { display: flex; list-style: none; padding: 0; margin: 0; font-size: 1.25em; li { padding-right: var(--space-4); } } } .description { .talks { padding-left: 0; list-style: none; .talk { border: thin solid var(--darken-1); display: inline-flex; padding: var(--space-2); border-radius: var(--space-1); .tags, .language { margin-right: 1ch; } .tags { white-space: nowrap; align-self: center; } &.tag- { display: none; } } } } } section.speaker { header { display: flex; align-items: center; justify-content: space-between; } .speaker-company { margin: var(--space-3) 0; display: flex; align-items: center; img { height: 4rem; margin-right: var(--space-4); } } } }