.tui-hero-splash {
  $splash-size-mobile: 80px;
  $splash-size-others: 160px;
  position: static;

  img {
    position: absolute;
    width: $splash-size-mobile;
    height: $splash-size-mobile;
    top: 80px;
    bottom: auto;
    right: $margin-half;
    z-index: 2;
  }

  .tui-hero-hotel & {
    img {
      top: $margin-normal;
    }
  }

  @include breakpoint(sm) {
    position: relative;

    img {
      width: $splash-size-others;
      height: $splash-size-others;
      bottom: 0;
      top: auto;
      right: 0;
    }
  }

  .startpage & {
    display: none;

    @include breakpoint(sm) {
      display: block;

      img {
        bottom: 0;
      }
    }
  }

  .blogoverviewpage & {
    img {
      height: auto;
    }
  }
}

@media only screen and (max-width: 360px) {
  .blogoverviewpage {
    .tui-hero-splash {
      img {
        top: 60px;
      }
    }
  }
}