.header-block {
  color: var(--green);
  width: 100%;
  min-height: 95vh;
  position: relative;
}

.header-block::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  mask-image: url("../../img/double-wave-repeatable.svg");
  mask-repeat: round;
  background-color: var(--light-green);
  mask-size: max(0.51875rem, 1.098828125vw);
  z-index: -1;
}

.header-block__inner {
  position: relative;
  padding-inline: var(--s-header-menu);
  display: grid;
  grid-template-columns: 71.3384%;
  grid-template-rows: 15% auto auto 28%;
  background-color: var(--dark-green);
  background-clip: content-box;
}

.header-block__img-wrapper {
  aspect-ratio: 1566 / 1100;
  grid-column: 1 / span 1;
  grid-row: 1 / span 4;
  mask-image: url("../../img/header-block-clip.svg");
  mask-size: cover;
  mask-repeat: no-repeat;
}

.header-block__headline {
  grid-column: 2 / span 1;
  grid-row: 4 / span 1;
  justify-self: center;
  text-align: center;
  padding-right: 1em;
  text-wrap: balance;
}

.header-block__logo-img {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  width: max(4.775rem, var(--grid-col-width));
  height: auto;
  justify-self: center;
  margin-right: max(1.5625rem, 1.953125vw);
}

.header-block__scroll-btn {
  position: absolute;
  bottom: calc((-1) * 1.1846153846em / 2);
  right: calc(50% - 0.5em);
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(30%);
  }
  60% {
    transform: translateY(15%);
  }
}

.header-block__scroll-btn:hover {
  animation: none;
}

.header-block__scroll-btn.fadeout {
  transition: opacity 0.3s ease;
  opacity: 0;
}

.alt-variant .header-block__inner {
  grid-template-rows: 15% repeat(4, auto) 1fr;
}

.alt-variant .header-block__headline {
  grid-row: 3 / span 1;
  font-size: max(1.25rem, 1.5625vw);
  padding-right: 0;
  max-width: min(100%, 23ch);
  margin: 0;
}

.content-wrapper .alt-variant h1.header-block__headline:first-child {
  margin-top: 1em;
}

.alt-variant .header-block__description {
  grid-row: 4 / span 1;
  grid-column: 2 / span 1;
  text-align: center;
  margin-block: 1em;
}

 .content-wrapper .alt-variant h2.header-block__headline-2 {
  grid-row: 5 / span 1;
  grid-column: 2 / span 1;
  font-size: max(1.25rem, 1.5625vw);
  text-align: center;
  margin: 0;
  max-width: min(100%, 21ch);
  justify-self: center;
  margin-top: var(--s-sm);
}

.alt-variant .header-block__btn {
  grid-row: 6 / span 1;
  grid-column: 2 / span 1;
  align-self: flex-start;
  margin-top: max(1.875rem, 1.171875vw);
  justify-self: center;
}

.alt-variant .header-block__img-wrapper {
  grid-row: 1 / span 6;
}

@media only screen and (orientation: portrait) {
  .header-block {
    min-height: calc(100vh - var(--topbar-height));
    min-height: calc(100svh - var(--topbar-height));
  }

  .header-block__inner,
  .alt-variant .header-block__inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: 66vh 1.5rem;
    grid-template-rows: 66svh 1.5rem;
    height: 100%;
    padding-inline: 0;
    min-height: calc(100vh - 2 * var(--topbar-height));
    min-height: calc(100svh - 2 * var(--topbar-height));
    padding-bottom: 2rem;
    background-clip: unset;
  }

  .header-block__img-wrapper,
  .alt-variant .header-block__img-wrapper {
    aspect-ratio: unset;
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
  }

  .header-block__logo-img {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
    margin-left: var(--s-header-menu);
    align-self: center;
  }

  .header-block__headline {
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
    margin-right: var(--s-header-menu);
    padding-right: 0;
    margin-bottom: 0;
    align-self: center;
    text-align: left;
  }

  .alt-variant .header-block__description {
    text-align: left;
  }

   .content-wrapper .alt-variant h2.header-block__headline-2 {
    text-align: left;
    justify-self: flex-start;
    text-wrap: balance;
   }

  .header-block__scroll-btn.arrow-btn--dark {
    background-color: var(--black);
  }

  .header-block__inner::before {
    content: "";
    mask-image: url("../../img/header-block-clip-portrait.svg");
    mask-repeat: repeat-x;
    mask-size: contain;
    mask-position: bottom center;
    background-color: var(--dark-green);
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
    align-self: flex-end;
    height: 2em;
    z-index: 1;
    transform: translateY(1px);
  }

  .alt-variant .header-block__btn {
    margin-top: var(--s-sm);
    justify-self: flex-start;
  }

  .alt-variant .header-block__btn {
    margin-bottom: var(--s-md);
  }

}