/* ==========================================================================
   TGC page system (Phase 11)
   --------------------------------------------------------------------------
   Shared layout tokens, card families, and image frames for product hub,
   category landings, product detail, industry grids, and related products.

   Linked after page-specific sheets and before tgc-foundation.css so the
   responsive/focus baseline still wins. Prefer these tokens over new
   one-off override layers. Avoid !important unless documenting why below.
   ========================================================================== */

:root {
  --tgc-content-max: var(--container, 1280px);
  --tgc-section-y: clamp(48px, 6vw, 88px);
  --tgc-grid-gap: 20px;
  --tgc-grid-gap-lg: 28px;
  --tgc-card-pad: 18px;
  --tgc-radius-card: 14px;
  --tgc-radius-media: 12px;
  --tgc-heading-gap: 10px;
  --tgc-cta-gap: 10px;
  --tgc-media-bg:
    radial-gradient(circle at 50% 18%, rgba(14, 124, 159, 0.07), transparent 46%),
    linear-gradient(180deg, #f9fbfd 0%, #edf3f7 100%);
  --tgc-card-border: rgba(15, 23, 42, 0.08);
  --tgc-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  --tgc-line-clamp-desc: 3;
  --tgc-line-clamp-related: 2;
  --tgc-ratio-category: 4 / 3;
  --tgc-ratio-product: 1 / 1;
  --tgc-ratio-industry: 16 / 10;
}

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */

.section:not(.hero):not(.cta),
.tgc-category-section {
  padding-block: var(--tgc-section-y);
}

.section-head {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.section-head h2 {
  margin-bottom: var(--tgc-heading-gap);
}

.tgc-category-intro,
.tgc-selection-guide,
.tgc-standards-notes,
.tgc-apps-block,
.tgc-docs-block {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Equal-height card grids
   -------------------------------------------------------------------------- */

.tgc-card-grid,
.valves-product-grid,
.product-family-grid,
.fittings-product-grid,
.process-product-grid,
.tank-category-grid,
.variant-grid,
.process-variant-grid {
  display: grid;
  gap: var(--tgc-grid-gap-lg);
  align-items: stretch;
}

.tgc-card-grid--3,
.valves-product-grid,
.product-family-grid,
.fittings-product-grid,
.process-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tgc-card-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tgc-card-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .tgc-card-grid--3,
  .tgc-card-grid--4,
  .valves-product-grid,
  .product-family-grid,
  .fittings-product-grid,
  .process-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .tgc-card-grid--2,
  .tgc-card-grid--3,
  .tgc-card-grid--4,
  .valves-product-grid,
  .product-family-grid,
  .fittings-product-grid,
  .process-product-grid,
  .tank-category-grid,
  .variant-grid,
  .process-variant-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Shared card shell (families 1–3 reuse .product-card markup)
   -------------------------------------------------------------------------- */

.product-card,
.tank-category-card,
.process-variant-card,
.tgc-card--category,
.tgc-card--product,
.tgc-card--related {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  border: 1px solid var(--tgc-card-border);
  border-radius: var(--tgc-radius-card);
  background: #fff;
  box-shadow: var(--tgc-card-shadow);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.product-card:hover,
.tank-category-card:hover,
.process-variant-card:hover,
.tgc-card--category:hover,
.tgc-card--product:hover,
.tgc-card--related:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-card:focus-within,
.tank-category-card:focus-within,
.process-variant-card:focus-within {
  outline: 2px solid var(--tgc-focus-ring, #0b5c7a);
  outline-offset: 2px;
}

/* Media frames */
.product-card-img,
.tank-card-media,
.process-variant-card-media,
.tgc-media-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  aspect-ratio: var(--tgc-ratio-category);
  padding: 14px 16px;
  background: var(--tgc-media-bg);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  overflow: hidden;
  border-radius: 0;
}

/* Product grids that opt into square frames */
.tgc-card-grid--product .product-card-img,
.tgc-card--product .product-card-img,
.tgc-card--related .product-card-img {
  aspect-ratio: var(--tgc-ratio-product);
}

.product-card-img img,
.tank-card-media img,
.process-variant-card-media img,
.tgc-media-frame img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 92%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* Cover only when explicitly marked crop-safe */
.tgc-media-frame--cover img,
.product-card-img.tgc-media-frame--cover img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card-body,
.tank-card-body,
.process-variant-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--tgc-card-pad);
  min-height: 0;
}

.product-card-body h3,
.tank-card-body h3,
.process-variant-card-body h3 {
  margin: 0 0 var(--tgc-heading-gap);
  font-size: 16px;
  line-height: 1.45;
  min-height: 2.9em; /* title alignment across equal rows */
}

.product-card-body > p,
.tank-card-body > p,
.process-variant-card-body > p,
.tgc-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--tgc-line-clamp-desc);
  line-clamp: var(--tgc-line-clamp-desc);
  overflow: hidden;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--gray-600, #475569);
}

.tgc-card--related .product-card-body > p,
.tgc-card--related .tgc-card-desc {
  -webkit-line-clamp: var(--tgc-line-clamp-related);
  line-clamp: var(--tgc-line-clamp-related);
}

.product-card-specs {
  margin-top: auto;
  margin-bottom: 12px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--gray-600, #475569);
  border-radius: 9px;
  background: linear-gradient(180deg, #f7fafc, #eef4f7);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.product-card-actions,
.tank-card-actions,
.process-variant-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tgc-cta-gap);
  margin-top: auto;
}

.product-card-actions .btn,
.tank-card-actions .btn {
  flex: 1 1 auto;
  justify-content: center;
  min-height: var(--tgc-tap-min, 44px);
}

/* --------------------------------------------------------------------------
   Industry cards
   -------------------------------------------------------------------------- */

.industry-card,
.tgc-card--industry {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: var(--tgc-radius-card);
  border: 1px solid var(--tgc-card-border);
  background: #fff;
  overflow: hidden;
}

.industry-card .industry-media,
.tgc-card--industry .tgc-media-frame {
  aspect-ratio: var(--tgc-ratio-industry);
  background: var(--tgc-media-bg);
}

.industry-card .industry-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Technical-information & trust cards
   -------------------------------------------------------------------------- */

.tgc-card--tech,
.datasheet-note-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: var(--tgc-radius-card);
  padding: var(--tgc-card-pad);
  border: 1px solid var(--tgc-card-border);
  background: #fff;
}

.tgc-card--tech .btn,
.datasheet-note-card .btn,
.tgc-card--tech a.more,
.datasheet-note-card a.more {
  margin-top: auto;
}

.tgc-trust-panel,
.tgc-card--trust {
  border-radius: var(--tgc-radius-card);
}

/* --------------------------------------------------------------------------
   Product detail media
   -------------------------------------------------------------------------- */

.product-media,
.fittings-hero-panel,
.tgc-product-hero-media {
  border-radius: var(--tgc-radius-card);
  background: var(--tgc-media-bg);
  overflow: hidden;
}

.product-media img,
.fittings-hero-panel img,
.tgc-product-hero-media img {
  width: auto;
  max-width: 100%;
  max-height: min(420px, 70vw);
  margin-inline: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Category structural helpers
   -------------------------------------------------------------------------- */

.tgc-qualify {
  font-size: 13px;
  color: var(--gray-500, #64748b);
  line-height: 1.8;
}

.tgc-spec-note {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--tgc-radius-media);
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--gray-200, #e2e8f0);
  font-size: 13px;
  color: var(--gray-600, #475569);
}

/* Soften legacy product-system !important aspect ratios on homepage when
   both sheets load: page-system sets the frame; foundation keeps focus/overflow. */

@media (max-width: 820px) {
  .product-card-body h3,
  .tank-card-body h3 {
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   Phase 12 — hygienic-components equal-height cards
   -------------------------------------------------------------------------- */

.tank-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tgc-grid-gap-lg);
  align-items: stretch;
}

.tank-category-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  border-radius: var(--tgc-radius-card);
}

.tank-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--tgc-ratio-category);
  padding: 14px;
  background: var(--tgc-media-bg);
  flex-shrink: 0;
}

.tank-card-image img {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--tgc-radius-media);
}

.tank-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--tgc-card-pad);
}

.tank-card-body h3 {
  min-height: 2.9em;
  margin: 0 0 var(--tgc-heading-gap);
  font-size: 17px;
  line-height: 1.45;
}

.tank-card-body > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0 0 12px;
  line-height: 1.75;
  min-height: calc(1.75em * 3);
}

.tank-mini-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 4.8em;
  overflow: hidden;
  margin-top: 0;
}

.tank-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tgc-cta-gap);
  margin-top: auto;
  padding-top: 12px;
}

@media (max-width: 1024px) {
  .tank-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .tank-category-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tank-card-body h3,
  .tank-card-body > p {
    min-height: 0;
  }
}

/* Product hub — one media ratio in the family grid */
.product-family-grid .product-card-img,
.products-page .product-card-img {
  aspect-ratio: var(--tgc-ratio-category);
}

.product-family-grid .product-card-img img,
.products-page .product-card-img img {
  width: auto;
  max-width: 92%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
}

/* Category-proxy / pending owner photography */
.tgc-image-qualify {
  margin: 10px 14px 14px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--gray-600, #475569);
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: var(--tgc-radius-media);
}

/* --------------------------------------------------------------------------
   Phase 12 — wide technical tables on small viewports
   -------------------------------------------------------------------------- */

.tgc-table-scroll {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: var(--tgc-radius-media);
  background: #fff;
}

.tgc-table-scroll:focus {
  outline: 2px solid var(--tgc-focus-ring, #0b5c7a);
  outline-offset: 2px;
}

.tgc-table-scroll-hint {
  display: none;
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--gray-500, #64748b);
}

.tgc-table-scroll table {
  margin: 0;
  min-width: 640px;
}

@media (max-width: 768px) {
  .tgc-table-scroll-hint {
    display: block;
  }

  .tgc-table-scroll {
    box-shadow: inset -18px 0 16px -16px rgba(15, 23, 42, 0.18);
  }

  .tgc-table-scroll table {
    font-size: 12.5px;
  }

  .tgc-table-scroll th,
  .tgc-table-scroll td {
    padding: 10px 12px;
    white-space: nowrap;
  }

  /* Sticky first column only when it leaves enough width for content */
  .tgc-table-scroll--sticky-col table th:first-child,
  .tgc-table-scroll--sticky-col table td:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--primary, #0a2540);
    color: #fff;
    box-shadow: -4px 0 8px rgba(15, 23, 42, 0.08);
  }

  .tgc-table-scroll--sticky-col table td:first-child {
    background: #fff;
    color: inherit;
  }
}

/* Why any remaining !important may exist elsewhere:
   - Historical versioned polish sheets (v13, category CSS) still use !important
     for homepage/category-specific hero layouts. Prefer migrating those rules
     into this file over time rather than adding new !important here.
   - Homepage v13 terminal override for card aspect-ratio (documented in card system). */

/* ==========================================================================
   Phase 13 — unified product-detail / category typography & hero grammar
   ========================================================================== */

:root {
  --tgc-hero-y: clamp(28px, 4vw, 48px);
  --tgc-hero-gap: clamp(24px, 4vw, 40px);
  --tgc-type-h1: clamp(1.65rem, 2.2vw, 2.15rem);
  --tgc-type-h2: clamp(1.25rem, 1.6vw, 1.55rem);
  --tgc-type-h3: 1.05rem;
  --tgc-type-body: 0.98rem;
  --tgc-type-designation: 0.92rem;
  --tgc-type-eyebrow: 0.72rem;
  --tgc-type-meta: 0.78rem;
  --tgc-type-card-title: 1.02rem;
  --tgc-type-card-desc: 0.9rem;
}

.tgc-product-detail .product-hero,
.tgc-category-page .page-hero {
  padding-block: var(--tgc-hero-y);
}

.tgc-product-detail .product-hero-inner,
.tgc-category-page .fittings-hero-grid {
  gap: var(--tgc-hero-gap);
}

.tgc-product-detail h1,
.tgc-category-page .page-hero h1,
.product-hero h1 {
  font-size: var(--tgc-type-h1);
  line-height: 1.35;
  margin: 0 0 8px;
}

.tgc-tech-designation {
  margin: 0 0 14px;
  font-size: var(--tgc-type-designation);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gray-500, #64748b);
  line-height: 1.45;
}

.tgc-pd-lead,
.tgc-category-page .page-hero-lead {
  font-size: var(--tgc-type-body);
  line-height: 1.85;
  max-width: 42rem;
}

.tgc-pd-support {
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--gray-600, #475569);
  max-width: 42rem;
}

.tgc-product-detail .eyebrow,
.tgc-category-page .eyebrow,
.section-head .eyebrow {
  font-size: var(--tgc-type-eyebrow);
  letter-spacing: 0.06em;
}

.tgc-product-detail .section-head h2,
.tgc-category-page .section-head h2 {
  font-size: var(--tgc-type-h2);
}

.tgc-product-detail .card h3,
.tgc-category-page .card h3,
.product-card-body h3 {
  font-size: var(--tgc-type-card-title);
}

.tgc-card-desc,
.product-card-body > p {
  font-size: var(--tgc-type-card-desc);
  display: -webkit-box;
  -webkit-line-clamp: var(--tgc-line-clamp-desc);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tgc-meta-chips,
.product-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.tgc-meta-chips span,
.product-hero-badges span {
  font-size: var(--tgc-type-meta);
}

.product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tgc-cta-gap);
  margin-top: 18px;
}

.tgc-pd-hero .product-media,
.tgc-pd-hero .tgc-product-hero-media {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tgc-media-bg);
}

.tgc-pd-hero .product-media img,
.tgc-pd-hero .tgc-product-hero-media img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Tubes must not keep a separate visual family once on the shared template. */
.tgc-category-page.hygienic-tubing-page .variant-grid,
.tgc-product-detail.hygienic-tubing-page .variant-grid {
  display: none;
}

/* --------------------------------------------------------------------------
   Stage A — Product Hub card readability (prototype-scoped)
   -------------------------------------------------------------------------- */

body.tgc-prototype-stage-a .tgc-card--category .tgc-card-desc,
body.tgc-prototype-stage-a .tgc-card--category .product-card-body > p {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--tgc-color-gray-700, #334155);
}

body.tgc-prototype-stage-a .tgc-card--category .product-card-body h3 {
  min-height: 2.9em;
}

body.tgc-prototype-stage-a .tgc-card--category .product-card-actions {
  margin-top: auto;
}

body.tgc-prototype-stage-a .fittings-product-grid.tgc-card-grid,
body.tgc-prototype-stage-a .tgc-card-grid--3 {
  align-items: stretch;
}

body.tgc-prototype-stage-a .tgc-card--category {
  height: 100%;
}

/* --------------------------------------------------------------------------
   IDS rollout — category hero (match product-detail grammar)
   -------------------------------------------------------------------------- */

.tgc-category-page .tgc-category-hero.tgc-pd-hero,
.tgc-category-page .product-hero.tgc-category-hero {
  padding-block: clamp(28px, 3.5vw, 48px);
  background:
    radial-gradient(circle at 12% 12%, rgba(14, 124, 159, 0.06), transparent 32%),
    linear-gradient(180deg, #f7fafc 0%, #fff 72%);
  border-bottom: 1px solid var(--gray-200, #e2e8f0);
}

.tgc-category-page .tgc-category-hero .product-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  max-width: var(--container, 1180px);
  margin: 0 auto;
  padding-inline: 32px;
}

.tgc-category-page .tgc-category-hero .tgc-hero-copy {
  min-width: 0;
}

.tgc-category-page .tgc-category-hero .tgc-tech-designation,
.tgc-product-detail .tgc-tech-designation {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 14px;
  text-align: start;
  unicode-bidi: isolate;
}

.tgc-category-page .tgc-category-hero .tgc-pd-lead {
  margin: 0;
  max-width: 40rem;
}

.tgc-category-page .tgc-category-hero .tgc-pd-support {
  margin-top: 8px;
  max-width: 40rem;
}

.tgc-category-page .tgc-category-hero .tgc-product-hero-media,
.tgc-category-page .tgc-category-hero .product-media {
  width: 100%;
  max-height: min(520px, 62vh);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--tgc-radius-card, 16px);
  overflow: hidden;
}

.tgc-category-page .tgc-category-hero .tgc-product-hero-media img,
.tgc-category-page .tgc-category-hero .product-media img {
  width: auto;
  height: auto;
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  object-position: center;
}

.tgc-category-page .tgc-category-hero .tgc-meta-chips {
  margin-top: 14px;
}

@media (max-width: 980px) {
  .tgc-category-page .tgc-category-hero .product-hero-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
    gap: 22px;
    padding-inline: 24px;
  }

  .tgc-category-page .tgc-category-hero .tgc-product-hero-media,
  .tgc-category-page .tgc-category-hero .product-media {
    max-height: min(440px, 55vh);
  }
}

@media (max-width: 760px) {
  .tgc-category-page .tgc-category-hero .product-hero-inner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-inline: 20px;
  }

  .tgc-category-page .tgc-category-hero .tgc-hero-copy {
    order: 1;
  }

  .tgc-category-page .tgc-category-hero .tgc-product-hero-media,
  .tgc-category-page .tgc-category-hero .product-media {
    order: 2;
    max-height: min(380px, 58vh);
    aspect-ratio: 1 / 1;
  }
}

/* --------------------------------------------------------------------------
   Stage A — Ball Valve minor polish (no redesign)
   -------------------------------------------------------------------------- */

.sanitary-ball-valve-page.tgc-prototype-stage-a .section {
  padding-block: clamp(27px, 3.1vw, 46px);
}

.sanitary-ball-valve-page.tgc-prototype-stage-a .section.section-alt {
  padding-block: clamp(27px, 3.1vw, 46px);
}

.sanitary-ball-valve-page.tgc-prototype-stage-a .section-head p,
.sanitary-ball-valve-page.tgc-prototype-stage-a .tgc-card--tech p,
.sanitary-ball-valve-page.tgc-prototype-stage-a .tgc-card-desc,
.sanitary-ball-valve-page.tgc-prototype-stage-a .product-card-body > p {
  color: var(--tgc-color-gray-700, #334155);
}

.sanitary-ball-valve-page.tgc-prototype-stage-a .tgc-meta-chips,
.sanitary-ball-valve-page.tgc-prototype-stage-a .product-hero-badges {
  direction: ltr;
  unicode-bidi: isolate;
}

.sanitary-ball-valve-page.tgc-prototype-stage-a .tgc-card-grid--product {
  align-items: stretch;
}

.sanitary-ball-valve-page.tgc-prototype-stage-a .tgc-card--product .product-card-img,
.sanitary-ball-valve-page.tgc-prototype-stage-a .tgc-card--related .product-card-img {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
}

.sanitary-ball-valve-page.tgc-prototype-stage-a .tgc-card--product .product-card-img img,
.sanitary-ball-valve-page.tgc-prototype-stage-a .tgc-card--related .product-card-img img {
  width: auto;
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
}