.hero-header {
  // based on the golden ratio
  $hh-height: 43.75vh;
  $hh-padding: 3.635vh;
  width: 100%;
  height: $hh-height;
  padding: $hh-padding;
  .hero-header__logo {
    width: $hh-height - ($hh-padding * 2);
    height: 100%;
    margin: auto;
    padding: 14.15%;
    background-color: $bd-lighter-gray;
    border-radius: 50%;
    box-shadow: $box-shadow;
  }
}

.hero-header__logo > img {
  width: 100%;
  height: 100%;
  // half the size of the amount that magnifying glass protrudes from the bus
  transform: translate(9.562%, 0);
  -webkit-transform: translate(9.562%, 0);
}

.hero-header {
  // based on the golden ratio
  $hh-height: 43.75vh;
  $hh-padding: 3.635vh;
  width: 100%;
  height: $hh-height;
  padding: $hh-padding;
  .hero-header__logo {
    width: $hh-height - ($hh-padding * 2);
    height: 100%;
    margin: auto;
    background-color: $bd-lighter-gray;
    border-radius: 50%;
    box-shadow: $box-shadow;
    // Pad the container 17.5% of its diameter
    // keeps the proportions of the logo to the container consistant accross all screen sizes
    padding: ($hh-height - ($hh-padding * 2)) * 0.175;
  }
}

.hero-header__logo > img {
  width: 100%;
  height: 100%;
  // half the size of the amount that magnifying glass protrudes from the bus
  transform: translate(9.562%, 0);
  -webkit-transform: translate(9.562%, 0);
}

Fix logo disappearing on larger screens
Fix logo disappearing on larger screens
