/* Page-specific imagery for the shared Product Family template. */
.inertial-navigation-hero {
  position: relative;
  overflow: hidden;
  background-color: #f0f2f6;
  background-image: none !important;
}

.inertial-navigation-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -12px;
  background-image:
    linear-gradient(
      90deg,
      rgba(240, 242, 246, .98) 0%,
      rgba(240, 242, 246, .9) 30%,
      rgba(240, 242, 246, .48) 48%,
      rgba(240, 242, 246, .1) 67%,
      rgba(240, 242, 246, 0) 78%
    ),
    url("images/backgrounds/inertial-navigation-systems-hero-bg.png") !important;
  background-position: center center, center center !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat;
  filter: blur(5px);
  transform: scale(1.025);
}

.inertial-navigation-hero-products {
  transform: translateY(-4px);
}

.inertial-navigation-hero-products::after {
  width: 42%;
  height: 7%;
  left: 29%;
  bottom: 7%;
  background: radial-gradient(ellipse at center, rgba(18, 34, 55, .2) 0%, rgba(18, 34, 55, .07) 48%, rgba(18, 34, 55, 0) 76%);
  filter: blur(9px);
}

.inertial-navigation-hero-main {
  z-index: 2;
  left: 29%;
  bottom: 0;
  width: 42%;
  max-width: 395px;
  filter: drop-shadow(0 15px 15px rgba(10, 29, 53, .18));
}

.inertial-navigation-product-image img {
  width: 64%;
  max-width: 300px;
}

@media (max-width: 1020px) {
  .inertial-navigation-hero-main {
    left: 27%;
    width: 46%;
  }
}

@media (max-width: 760px) {
  .inertial-navigation-hero {
    background-color: #f0f2f6;
  }

  .inertial-navigation-hero::before {
    background-position: center center, 68% center !important;
    filter: blur(5px);
  }

  .inertial-navigation-hero-products {
    transform: none;
  }

  .inertial-navigation-hero-main {
    left: 23%;
    bottom: 0;
    width: 54%;
  }

  .inertial-navigation-product-image img {
    width: 68%;
  }
}