/*
 * P10-SITE-1048
 * Homepage image sizing guard with a mobile hero composition.
 *
 * The source images keep explicit width/height attributes to reserve space
 * before loading. On narrow screens, the shared card rules replace the width
 * but did not reset the HTML height, so several images retained a 1000/1024px
 * height and became vertically stretched. These homepage-only rules restore each
 * component's intended aspect ratio without changing source assets.
 */
.line-card img {
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.category-showcase-card img,
.featured-product-card img,
.capability-media img {
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (max-width: 720px) {
  .hero-media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .hero-media .hero-main {
    grid-column: 1 / -1;
    width: 100%;
  }

  .hero-media .hero-float {
    width: 100%;
    height: auto;
    margin: 0;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    vertical-align: top;
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(23, 52, 79, 0.12);
  }
}