не может нажать кнопку на определенной ширине точки обзора

Question

На целевой странице моего приложения Angular в заголовке есть кнопка, которая вызывает модальное окно при каждом нажатии. Но из-за некоторой ошибки, в то время как она работает в основном хорошо, но при определенных значениях ширины точки обзора, таких как max-width 812px и 1864px и далее, кнопка не нажимается. Вы можете проверить мой репозиторий Github здесь . Ниже мой код выглядит так:

home. html:

<div class="container-fluid">
  <div class="row">
 <div class="page-header section-dark" style="background-image: url('assets/images/antoine-barres.jpg')">
    <div class="filter"></div>
    <div class="content-center">
        <div class="container">
            <div class="row">
                <div class="col-xl-4 col-lg-8 mx-auto text-center logo-responsive">
                    <img src="assets/images/logo.png" alt="">
                </div>
                <div class="col-xl-8 col-lg-12 margin-top" style="text-align: center;">
                    <h1 class="presentation-title mx-auto text-center">COMPANY NAME</h1>
                    <h2 class="presentation-subtitle mx-auto text-center">LONG Description</h2>
                     //need help with this button
                    <a href="#" class="btn btn-outline-neutral btn-round mr-auto" #myModal (click)="openModal()"><i class="fa fa-play"></i>Book a free session</a>
                </div>
                <div class="fog-low">
                    <img src="assets/images/fog-low.png" alt="">
                </div>
                <div class="fog-low right">
                    <img src="assets/images/fog-low.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="moving-clouds" style="background-image: url('assets/images/clouds.png');"></div>
</div>
</div>

home.s css:

.btn {
    border: 0 none;
    font-weight: 500;
    z-index: 200;
    color:#fff;
    background-color: #de6b28;
}

    .btn:focus, .btn:active:focus, .btn.active:focus {
        outline: 0 none;
    }
.section-dark{
    background-color: #0b1011;
}
.section-image,
.section-gold,
.section-dark{
    position: relative;

    .title,
    .info-title,
    .card-plain .card-title{
        color: $white-color !important;
    }
    .category,
    .description,
    .card-plain .card-description,
    .card-plain .card-category{
        color: rgba($white-color, .7);
    }
    hr{
        border-color: rgba(255, 255, 255, 0.19);
    }
}
.fog-low{
        margin-bottom: -35px;
    }
.moving-clouds{
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 250.625em;
    height: 43.75em;
    -webkit-animation: cloudLoop 80s linear infinite;
    animation: cloudLoop 80s linear infinite;
    pointer-events:none;
}
.fog-low{
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    margin-left: -35%;
    margin-bottom: -50px;
    width: 110%;
    opacity: .85;

    img{
        width: 100%;
        z-index: 1;
    }

    &.right{
        margin-left: 30%;
        opacity: 1;
        z-index: 1;
    }
}