.navbar-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 0.2fr);
}

.logo {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
  padding: 24px 0;
}

@media (max-width:750px) {
  .logo {
  grid-row: 1;
  grid-column: 1 / span 2;
  justify-self: center;
}
}
.logo img {
  width: auto;
}

@media (max-width:750px) {
  .logo img {
  width: auto;

  }
}

@media (max-width:500px) {
  .logo img {
  width: auto;
  }
}

.webmail {
  background-position: center left;
  background-size: 32px 21px;
  background-repeat: no-repeat;
  background-image: url(/mail.png);
  padding: 12px;
  padding-left: 12px;
  padding-left: 50px;
  opacity: 0.9;  
}

.billpay {
  padding-right: 8px;
  background-position: center left;
  background-size: 44px 40px;
  background-repeat: no-repeat;
  background-image: url(/billpay.png);
  padding: 12px;
  padding-left: 50px;
  opacity: 0.9;
}



.navlinks {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-weight: bold;
}

.navnumber {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin-right: 16px;
  font-size: 18px; 
  font-weight: bold;
}

@media (max-width:750px) {
  .navlinks {
  grid-column: 1 / span 2;
  grid-row: 2;
  justify-self: center;
}
}

@media (max-width:750px) {
  .navnumber {
  grid-column: 1 / span 2;
  grid-row: 3;
  justify-self: center;
  margin: auto;
}
}