.node-185 .header__hero,
.node-186 .header__hero,
.node-189 .header__hero {
  background-image: url(../img/hero_02.webp);
  @media screen and (min-width: 1200px) {
    background-image: url(../img/hero_02.webp);
  }
}

.node-187 .header__hero {
  background-image: url(../img/hero_04.jpg);
  @media screen and (min-width: 1200px) {
    background-image: url(../img/hero_04.jpg);
  }
}

.node-188 .header__hero {
  background-image: url(../img/hero_05.jpg);
  @media screen and (min-width: 1200px) {
    background-image: url(../img/hero_05.jpg);
  }
}

.path-reference .header__hero {
  background-image: url(../img/hero_03.jpg);
  @media screen and (min-width: 1200px) {
    background-image: url(../img/hero_03.jpg);
  }
}

.path-kariera .header__hero {
  background-image: url(../img/hero_kariera_01.webp);
  @media screen and (min-width: 1200px) {
    background-image: url(../img/hero_kariera_01.webp);
  }
}

.hero-bottom {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2rem;
  background: transparent url(../img/hero_bottom.svg) 50% 100% no-repeat;
  background-size: contain;
}

.hero-bottom::after {
  content: "❮";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%) rotate(-90deg);
  font-size: 3em;
  color: var(--clr-white);
  animation: scrolldown 500ms ease infinite;
}

@keyframes scrolldown {
  0% {
    bottom: 2rem;
  }
  50% {
    bottom: 1.5rem;
  }
  100% {
    bottom: 2rem;
  }
}