Как заставить часть элемента исчезнуть, когда он находится позади другого

Question

Я пытаюсь заставить границы исчезать только тогда, когда они находятся за другими элементами. Похоже на скриншот. Кто-нибудь знает, как заставить определенную часть границы исчезать, когда она идет за другим элементом?

Когда .border идет позади .mobile-toggle и .hero-details, я хочу, чтобы указанная c часть .border исчезла. Таким образом, это выглядит обрезанным, как показано на рисунке.
Вот страница https://wordpress-324331-1192326.cloudwaysapps.com/, а ниже - упрощенный код.

Вот упрощенный пример Codepen: https://codepen.io/elemusma/pen/RwPXMRJ?editors=1100

HTML

<a href="#" class="toggle">
  <span style="border-top:2px solid black;with:50px;height:50px;"></span>
</a>
<button class="navbar-toggle mobile-toggle" type="button" id="open-button" data-toggle="collapse" data-target=".navbar-collapse">
<span></span>
<span></span>
<span></span>
</button>
<div class="home" id="home" style="background:url('https://wordpress-324331-1192326.cloudwaysapps.com/wp-content/uploads/2020/04/Welcome-Luxury-Compass.jpg');">
  <div class="border"></div>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2054761/Luxury-Logo.png" width="250" class="logo"/>
  <div class="hero">
                <div class="hero-details text-center">
            <h4 class="bodoni subtitle">Positioning</h4>
            <h6>You to a <strong>Higher Level</strong></h6>
            </div>
            </div>
</div>

CSS

.home{
  position:relative;
  height:500px;
}
.mobile-toggle{
  position:absolute;
  bottom:90px;
  z-index:9;
}
.mobile-toggle span {
    display: block;
    width: 36px;
    height: 7px;
    background: #232323;
    content: "";
    margin: 3px 0px;
}
.hero {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo{
  transform:translate(100%, -50%);
  position:absolute;
}
.border{
  position:absolute;
  border:1px solid black;
  height:90%;
  width:90%;
}