.family-landing-hero {
  background: #f8fbff;
}

.family-landing-hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("images/backgrounds/autonomous-systems-hero-bg-v2.png") center right / cover no-repeat;
  pointer-events: none;
}

.family-landing-hero .hero-grid {
  grid-template-columns: .86fr 1.14fr;
}

.family-landing-hero .hero-copy {
  padding-bottom: 72px;
}

.family-landing-hero h1 {
  max-width: 620px;
}

.family-landing-products {
  position: absolute;
  inset: 0;
  isolation: isolate;
  transform: translateY(-54px);
}

.family-landing-product {
  position: absolute;
  height: auto;
}

.family-landing-product::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: var(--cast-shadow-left, 4%);
  bottom: var(--cast-shadow-bottom, -4px);
  width: var(--cast-shadow-width, 110%);
  height: var(--cast-shadow-height, 20px);
  background:
    radial-gradient(
      ellipse 46% 58% at 25% 48%,
      rgba(8, 24, 44, .16) 0%,
      rgba(8, 24, 44, .085) 35%,
      rgba(8, 24, 44, 0) 74%
    ),
    radial-gradient(
      ellipse 68% 72% at 60% 54%,
      rgba(8, 24, 44, .07) 0%,
      rgba(8, 24, 44, .028) 44%,
      rgba(8, 24, 44, 0) 78%
  );
  filter: blur(8px);
  opacity: var(--cast-shadow-opacity, .7);
  transform:
    translateX(var(--cast-shadow-shift, 6%))
    rotate(var(--cast-shadow-rotate, -2deg))
    skewX(-10deg)
    scaleY(.72);
  transform-origin: left center;
}

.family-landing-product-crop {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  overflow: hidden;
  filter: none;
}

.family-landing-device {
  position: absolute;
  height: auto;
  max-width: none;
  object-fit: contain;
  filter: none;
}

.family-landing-product--network {
  --cast-shadow-left: 3%;
  --cast-shadow-width: 110%;
  --cast-shadow-height: 16px;
  --cast-shadow-shift: 6%;
  --cast-shadow-opacity: .5;
  z-index: 2;
  left: 9%;
  bottom: 6.2%;
  width: 23%;
  aspect-ratio: 1.786;
}

.family-landing-product--controller {
  --cast-shadow-left: 1%;
  --cast-shadow-width: 108%;
  --cast-shadow-height: 21px;
  --cast-shadow-shift: 4%;
  --cast-shadow-opacity: .58;
  z-index: 4;
  left: 34%;
  bottom: 5%;
  width: 34%;
  aspect-ratio: 1.828;
}

.family-landing-product--navigation {
  --cast-shadow-left: 5%;
  --cast-shadow-width: 104%;
  --cast-shadow-height: 17px;
  --cast-shadow-shift: 5%;
  --cast-shadow-opacity: .52;
  z-index: 3;
  left: 70%;
  bottom: 6.2%;
  width: 23%;
  aspect-ratio: 1.671;
}

.family-landing-device--network {
  left: -21.4%;
  top: -35.4%;
  width: 143%;
}

.family-landing-device--controller {
  left: -27.7%;
  top: -46%;
  width: 162%;
}

.family-landing-device--navigation {
  left: -6%;
  top: -40%;
  width: 112%;
}

.autonomous-product-line-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.autonomous-product-line-grid .product-line-card {
  grid-column: span 2;
}

.autonomous-product-line-grid .product-line-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.autonomous-product-line-grid .product-line-card:nth-child(5) {
  grid-column: 4 / span 2;
}

.product-line-card {
  box-shadow: 0 5px 16px rgba(22, 64, 112, .035);
}

.product-line-card:focus-within {
  border-color: #8eb9ec;
  box-shadow: 0 14px 35px rgba(22, 64, 112, .08);
  transform: translateY(-2px);
}

.product-line-link {
  color: inherit;
}

.product-line-link:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: -4px;
}

.product-line-link:hover .arrow,
.product-line-link:focus-visible .arrow {
  transform: translateX(4px);
}

.product-line-visual {
  height: 205px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  overflow: hidden;
  background: #f8fbfe;
}

.product-line-image {
  display: block;
  width: auto;
  height: var(--product-image-canvas-height, 165px);
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 8px 9px rgba(11, 29, 52, .11));
  transition: transform 200ms ease;
}

.product-line-link:hover .product-line-image,
.product-line-link:focus-visible .product-line-image {
  transform: translateY(-2px);
}

.product-line-image--controller {
  --product-image-canvas-height: 237px;
}

.product-line-image--imu {
  --product-image-canvas-height: 143px;
}

.product-line-image--timing {
  --product-image-canvas-height: 201px;
}

.product-line-image--navigation {
  --product-image-canvas-height: 231px;
}

.product-line-image--connectivity {
  --product-image-canvas-height: 198px;
}

.product-line-copy h3 {
  min-height: 2.5em;
}

@media (max-width: 1100px) {
  .family-landing-hero .hero-grid {
    grid-template-columns: .92fr 1.08fr;
  }

  .autonomous-product-line-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .autonomous-product-line-grid .product-line-card,
  .autonomous-product-line-grid .product-line-card:nth-child(4),
  .autonomous-product-line-grid .product-line-card:nth-child(5) {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .family-landing-hero-background {
    background-position: 70% center;
  }

  .family-landing-hero .hero-grid {
    grid-template-columns: 1fr;
  }

  .family-landing-hero .hero-copy {
    padding-bottom: 18px;
  }

  .family-landing-hero h1 {
    font-size: clamp(36px, 10.5vw, 42px);
  }

  .breadcrumbs {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .breadcrumbs ol {
    width: max-content;
    padding-bottom: 6px;
  }

  .family-landing-products {
    transform: translateY(-20px);
  }

  .family-landing-product--network {
    left: 8%;
    bottom: 6.5%;
    width: 24%;
  }

  .family-landing-product--controller {
    left: 34%;
    bottom: 5%;
    width: 35%;
  }

  .family-landing-product--navigation {
    left: 71%;
    bottom: 6.5%;
    width: 24%;
  }

  .autonomous-product-line-grid {
    grid-template-columns: 1fr;
  }

  .product-line-copy h3 {
    min-height: 0;
  }

  .contact-button {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-line-card,
  .product-line-image,
  .product-line-cta .arrow {
    transition: none !important;
  }

  .product-line-card:hover,
  .product-line-card:focus-within,
  .product-line-link:hover .product-line-image,
  .product-line-link:focus-visible .product-line-image {
    transform: none;
  }
}