

.splash {
  margin: calc(var(--line-height-em) * 5) auto 0 0;
}

.splash .overlapping-element {
  margin-bottom: var(--line-height-em);
}

.splash .overlapping-element__image-wrapper {
  max-width: 40em;
}


.splash .overlapping-element__text {
  max-width: 45em;
}


.splash .overlapping-element__text::before {
  width: 200px;
  left: calc(-.75 * 200px);        /* 75% of width */
}

.team__full-description {
  margin-bottom: var(--line-height-em);
}

@media screen and (max-width:1000px) {
  .overlapping-element {
    display: block;
  }

  .overlapping-element__image-wrapper {
    max-width: none;
    width: 100%;
    max-height: 350px;
    margin-right: 0;
  }

  .overlapping-element__image {
    max-height: 350px;
    object-fit: cover;
  }

  .overlapping-element__text {
    width: 100%;
    padding-left: var(--line-height-em);
    padding-right: calc(var(--line-height-em)/2);
  }

  .overlapping-element__text::before {
    left: 0;
    width: 100px;
    height: calc(100% +  250px + 100px);     /* 100px jutting out above image wrapper, 100px (minus margin-top of h2) jutting below */
    top: calc(-1.85714286em - 250px);   /* juts out 100px */
  }
}

/* ---- section: people ----- */

section.people {
  background-color: var(--almost-black);
  padding-top: calc(var(--line-height-em)*2);
  padding-bottom: calc(var(--line-height-em)*2);
  margin-bottom: calc(var(--line-height-em)*2);
}

.people__title {
  font-size: var(--fs-x-small);
  color: var(--block-gray);
  text-transform: uppercase;
  letter-spacing: 1px;
}

section.people .overlapping-element__text::before {
  width: 100px;
  left: calc(-.75 * 100px);        /* 75% of width */
}


.people__row {
  display: flex;
  flex-wrap: wrap;
}

.person {
  display: block;
  margin-right: var(--line-height-em);
  text-decoration: none;
  display: flex;
  align-items: stretch;
  margin-bottom: var(--line-height-em);
}


.person__info {
  padding: calc(var(--line-height-em)/2)  1em calc(var(--line-height-em)/2) 1em;
  background: var(--background-white);
}

.person__name {
  cursor: pointer;
  margin-top: 0;
  margin-bottom: calc(var(--line-height-em)/1.75);
  font-size: var(--fs-small);
}

.person__name a {
  color: var(--almost-black);
}


.person__name:hover a {
  color: var(--bright-orange);
}


.person__topics {
  font-size: var(--fs-x-small);
}

.person__picture {
  background-color: var(--muted);
  min-height: 95px;
  min-width: 95px;
  max-height: 95px;
  max-width: 95px;
  object-fit: cover;
  margin-bottom: 0;
}

.person__picture::before {
  content: ' ';
   display: block;
   position: absolute;
   height: 50px;
   width: 50px;
   background-image: url('/components/assets/unknown-person.png');
}

@media screen and (max-width:649px) {
  .person__picture {
    min-width: 50px;
    max-width: 50px;
    min-height: 50px;
    max-height: 50px;
  }
}

.person__name-wrapper {
  display: block;
}

.team__additional-members {
  color: var(--white);
}

/* ---- section: exposition ----- */

.exposition {
  margin: auto;
}

.exposition .overlapping-element__image-wrapper {
  width: 20em;
}

section.exposition .overlapping-element__text {
  width: 60em;
}

section.exposition .overlapping-element__text::before {
  width: 200px;
  left: calc(-.75 * 200px);        /* 75% of width */
}

.expo__paragraph-body {
  margin-bottom: var(--line-height-em);
}

@media screen and (max-width:649px) {
  section.exposition .overlapping-element__text {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .overlapping-element__text-bg {
    padding-left: var(--line-height-em);
    padding-right: var(--line-height-em);
  }

}
