:root {
  --black: #000;
  --white: #fff;
  --color-1: #000;
  --gutter: 2rem;
  /* this value is going to be changed by javascript */
  --replace-offset-logo: 50%;
  --replace-offset-logo-2: calc((100% - var(--replace-offset-logo) ) * -1)
}

/* set image position */

/* .footer {
  padding: calc(var(--gutter) * .5);
  background-color: var(--black);
  color: var(--white);
} */

/* without fixed header this makes no sense */
.header-logo {
  /* position: fixed; */
  /* top: 50%; */
  /* transform: translateY(-50%); */
  left: 0;
  right: 0;
  /* padding: calc(var(--gutter) * .5); */
  z-index: 40;
  /* text-align: center; */
}

/* .logo {
  display: inline-block;
  border: solid;
  padding: calc(var(--gutter) * .25);
  border-radius: calc(var(--gutter) * .25);
  font-size: 2em;
}

.logo--invert {
  background-color: var(--black);
  color: var(--white);
  border-color: var(--white);
} */



.section--bg-logo {
  background-color: var(--color-1);
}

/**
  This is the interesting part
**/

/* align content above each other without absolute */
.js-replace-logo {
  display: grid;
}

.js-replace__logo {
  grid-row: -1 / 1;
  grid-column: -1 / 1; 
  overflow: hidden;
  /* will-change: transform; */
}

/* item to replace with */
.js-replace__logo {
  transform: translateY(calc(var(--replace-offset-logo) * 1));  
}
.js-replace__content-logo {
  /* fixes problem with calculating correct height in js */
  border: 1px solid transparent; 
  will-change: transform;

  transform: translateY(calc(var(--replace-offset-logo) * -1));
}

/* previous replace item*/
.js-replace__logo--active {
  transform: translateY(calc(var(--replace-offset-logo-2) * 1));  
}
.js-replace__logo--active .js-replace__content-logo {
  transform: translateY(calc(var(--replace-offset-logo-2) * -1));  
}


/* REVERSE ANIMATION */
.js-replace--reverse-logo
.js-replace__logo {
  transform: translateY(calc(var(--replace-offset-logo-2) * 1));  
}
.js-replace--reverse-logo
.js-replace__content-logo {
  transform: translateY(calc(var(--replace-offset-logo-2) * -1));
}

/* previous replace item*/
.js-replace--reverse-logo 
.js-replace__logo--active {
  transform: translateY(calc(var(--replace-offset-logo) * 1));  
}
.js-replace--reverse-logo 
.js-replace__logo--active .js-replace__content-logo {
  transform: translateY(calc(var(--replace-offset-logo) * -1));
}