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