.presentation {
  height: calc(100vh - 4em);
  padding: 5em;
  display: flex;
  flex-direction: row;

  justify-content: center;
  & h1 {
    padding: 0;
    margin: 0;
  }
}

.presentation aside
{
  padding: 1em 0 ;
  background-color: var(--bgcolor-box);
  height: 100%;
  max-width: 20%;
  border-radius: 2em 0 0 2em;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.presentation aside img {
  max-width: 80%;
  max-height: 30%;
  margin: 0 auto;
  border-radius: 2em;
}


.presentation aside span {
  padding: 0 2em;
}

.presentation section {
  position: relative;
  background-color: var(--bgcolor-emph);
  width: 2em;
  transition: 1s;
  border-radius: 0 2em 2em 0;
  border-left: 1px solid var(--fgcolor-link);

  overflow: hidden;
  & span {
    visibility: hidden;
  }
  & h1 {
    padding-bottom: .5em;
  }
}

.presentation section::before {
  content: '';
  position: absolute;
  width: 2em;
  background-color: var(--bgcolor-box);
  height: 100%;
  right: 0;
  top: 0;
}

.presentation section img {
  width: 2em;
  padding: .5em;
  right: 0;

  position: absolute;
  top: 50%;

  transition: transform 1s;
}

.presentation {
  & section:hover {
    width: 100%;
    & img {
      visibility: visible;
      transform: scaleX(-1);
    }
    & span {
      visibility: visible;
      transition-delay: 500ms;
      transition-duration: 500ms;
    }
  }
  & aside:hover + section {
    width: 100%;
    & img {
      transform: scaleX(-1);
    }
    & span {
      visibility: visible;
      transition-delay: 500ms;
      transition-duration: 500ms;
    }
  }
}

.presentation section span {
  display: block;
  height: 100%;
  padding: 2em;
  top: 0;
}

.presentation address a:hover {
  text-decoration: 1px underline solid var(--fgcolor-link);
}