/* Responsive images: preserve the complete frame and embedded text. */
img {
  max-width: 100%;
}

picture,
figure {
  max-width: 100%;
}

.hero-image,
.page-visual figure,
.visual-card,
.visual-link,
.slice-card,
.case-card,
.tg-card,
.report-grid figure,
.plcase-grid figure {
  min-width: 0;
}

.hero-image img,
.feature-case > img,
.case-card img,
.tg-card img,
.page-visual img,
.report-grid img,
.report-grid figure:first-child img,
.plcase-grid img,
.visual-card img,
.slice-card img,
.visual-link img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 820px) {
  .hero-image {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .visual-grid,
  .slice-grid {
    grid-template-columns: 1fr;
  }

  .hero-image img,
  .feature-case > img,
  .case-card img,
  .tg-card img,
  .page-visual img,
  .report-grid img,
  .report-grid figure:first-child img,
  .plcase-grid img,
  .visual-card img,
  .slice-card img,
  .visual-link img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
  }

  .hero-image img,
  .feature-case > img {
    max-height: 360px;
  }

  .case-card img,
  .tg-card img {
    max-height: 320px;
  }

  .page-visual img,
  .report-grid img,
  .report-grid figure:first-child img,
  .plcase-grid img {
    max-height: 70vh;
  }

  .visual-card img,
  .slice-card img,
  .visual-link img {
    max-height: 480px;
  }
}

@media (max-width: 480px) {
  .hero-image img,
  .feature-case > img {
    max-height: 320px;
  }

  .case-card img,
  .tg-card img {
    max-height: 280px;
  }

  .visual-card img,
  .slice-card img,
  .visual-link img {
    max-height: 440px;
  }
}