.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;
        li {
          padding-right: var(--space-4);
        }
      }
    }

    }

  section.speaker {
    padding: var(--space-4) var(--container-margin);

    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);
      }
    }
  }
}