For CSS background-image character face got cut off once the screen getting bigger

const closeNav =  document.querySelector(".close-nav")
const getNav= document.querySelector(".nav")
const openNav = document.querySelector(".closetag")

closeNav.addEventListener ("click", function() {
    getNav.classList.remove('navigation-open');
});

 openNav.addEventListener("click",function(){
   getNav.classList.add('navigation-open')
 })

* {box-sizing: border-box;}

body {
  margin:0;
  font-family: 'Montserrat',sans-serif;
  font-size:1rem;
  color:#404040;
  line-height:1.6
}


h1, h2, strong {
  font-weight: 700;
}

.hero {
  background-image: url(https://upload.cc/i1/2020/08/16/BZimrY.jpg);
  background-repeat: no-repeat;
  background-size:cover ;
  color:#fff;
  max-width: 1250px;
  margin: auto;
  padding: 4em 0;
  background-position: bottom;
}

.accent-color {
  color:#ffe600
}

.hero-title {
  font-size:1.5rem;
  line-height:1.4;
  margin-bottom:0;
  margin-top: 5rem;
}

.hero > * {
  grid-column:2/-2
}

@media (min-width:600px) {
  .hero > * {
  grid-column:2/ span 2
}
  
}
.btn-primary {
  background-color: #ffe600;
  color:black;
  text-decoration:none;
  justify-self:start;
  align-self: center;
}

.btn {
  padding:0.5em 1.5em;
  margin-top:0.5em;
  font-weight:700;
}


/* =================
    general layout
====================*/
.main-grid {
  display: grid;
  grid-template-columns: minmax(1em,1fr) minmax(0px,500px) minmax(1em,1fr); 
   grid-gap: 0em 2em
}

@media (min-width: 600px){
  .main-grid { 
    grid-template-columns: minmax(1em,1fr) repeat(3,minmax(130px,320px)) minmax(1em,1fr)
    
  }
  
}
/* =================
   info section
==================*/

.info >* {
  grid-column:2/-2
}

.info {
  padding: 4em 0;
}

.info > h3 {
  text-align:center
}

@media (min-width: 600px) {
  .col {
    grid-column: span 1;
    }
  .col:first-child {
    grid-column:2/3
  }
}

/* =================
   footer section
==================*/

.footer >* {
  grid-column:2/-2
}

.social-item {
  list-style-type: none;
}

.footer {
  background-color: #ebebeb;
  text-align:center;
  padding: 1.5em;
}

ul.social-list {
    order:-1;
    padding:0;
    margin:0;
    display:flex;
    justify-content: center;
    letter-spacing:1em;
    font-size:1.5rem;
}

.social-link {
  color:black;
}

.social-link:hover,
.social-focuse{
  color: #777
}

.fa-facebook-square {
  margin-left:20px
}

.footer-main > * {
  opacity: 0.6
}

@media (min-width: 600px) {
  .footer-main {
     grid-column: 1 / 4;
     text-align:start;
     margin-left: 2em;
    }
  
  .social-list{
    grid-column:  4 / 6 ;
    grid-row: 1 / 3 ;
    justify-self: end;
    align-self: center;
  }
}


.logo-link {
  background-color: yellow;
  padding-top: 2em;
}

.nav-list {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   list-style: none;
   margin: 0;
   padding: 0;
   height: 100%;
}

.nav-link {
  color:white;
  text-decoration:none;
  font-size: 2rem;
  font-weight:700;
  letter-spacing:1px;
}

.header-content {
    display: flex;
    grid-column: 2/-2;
}

header.main-grid {
    position: absolute;
    width: 100vw;
}
.nav {
  position:fixed;
  background-color: #000;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom 0;
  height: 100%;
  left: 100%;
  transform: translateX(0%);
  transition: 0.5s
}

.navigation-open {
    transform: translateX(-100%);
}

.nav-link:hover,
.nav-link:focus {
  color: yellow
}


.close-nav {
  background-color: #000;
  border:0;
  color:yellow;
  font-size:3rem;
  cursor:pointer;
  padding: .5em;
  position: absolute;
}

.fas {
  font-size:2.5em;
  color:white;
}

.closetag {
  position: absolute;
  right:1%;
  top:20%;
  background-color: #000;
  border:0;
  cursor: pointer;
  padding: .3em 1.5em;
  background-color: TRANSPARENT;
}

.close-nav:hover {
  color: white
}
.close-nav:focus,
.closetag:focus {
  outline: none;
  
}

.fas:hover {
  color:yellow
}

@media (min-width:600px) {
  button.closetag,
  .close-nav {
    display: none;
}
  .nav {
    background-color: transparent;
    position: initial;
        
    }
  .nav-list {
    flex-direction: row;
    justify-content: unset;
  }
  
  .nav-link {
    font-size:1.4rem;
    margin-left: 18px;
  }
  
  .header-content {
    align-items: center;
  }
  

 
 
}

<html>
<body>
  
<header class="main-grid">
 <div class="header-content">
   <button class="closetag"><i class="fas fa-bars"></i></button>
   <a class="logo-link" href="index.html">
      <img src="https://upload.cc/i1/2020/08/16/IS7eGa.png"alt="">
   </a>
   <nav class="nav">
      <button aria-label= "Close navigation" class="close-nav">&times;</button>
      <ul class="nav-list">
        <li class="nav-item"><a href="https://cdpn.io/demi-chen/debug/LYNLrGx/YvkgOeEPvgEk" class="nav-link">home</a></li>
        <li class="nav-item"><a href="https://cdpn.io/demi-chen/debug/LYNLrGx/YvkgOeEPvgEk" class="nav-link">about us</a></li>
        <li class="nav-item"><a href="#" class="nav-link">contact</a></li>
      </ul>
   </nav>
  
  </div>
 </header> 
 
<main>
  
    <section class="hero main-grid">
      <h1 class="hero-title">The only marketing agency on <span class="accent-color"> a mission from God </span>, fully dedicated to increase your web traffic.</h1>
      <p class="subtitle">We’re two brothers from Chicago that are trying to pay back our debt. We can help you with <strong>SEO, SEM, content marketing</strong> and whatever else.</p>
      <a href="#" class="btn btn-primary"> contact us </a>
   </section>
  
  <section class="info main-grid">
    <div class="col">
    <h3>About Us</h3>   
    <p>We grew up in downtown Chicago, and we used to play in a band. <strong>Jake loves fried chicken, and Elwood loves dry white toast.</strong></p>
    </div>

    
    <div class="col">
    <h3>Our skills</h3>
    <p>Elwood is an expert in<strong> SEO, SEM, and driving from the police</strong>. Jake is our <strong>social media specialist</strong>, and he has an amazing voice.</p>
    </div>
    
    <div class= "col">
    <h3>Get in touch</h3>
    <p>Send us an email with some info about what help you need and <strong>we’ll drive over to your place</strong> in our Bluesmobile the following day to discuss the deal.</p>
     </div>
    
  </section>
  
  </main>
  
  <footer class="footer main-grid">
    <div class="footer-main">
      <h3>Jake&Elwood</h3>
      <p>Two brothers from Chicago that are just trying to pay back their debt by helping others with their SEO, SEM, and Content Marketing needs.</p>
      <p>© Jake&Elwood 2019</p>
    </div>
    
    <ul class="social-list"> 
      <li class="social-item"><a href="#" class="social-link"><i class="fab fa-facebook-square"></i></a></li>
      <li class="social-item"><a href="#" class="social-link"><i class="fab fa-twitter"></i></a></li>
      <li class="social-item"><a href="#" class="social-link"><i class="fab fa-instagram"></i></a></li>
    </ul>
    
  </footer>

  
  
  
  
  </body> 
</html>