/* ============================================================
   BRAND ELEMENTS PAGE — photography, visual expressions, graphs
   ============================================================ */

/* img-cell picture: must be block for height chain in fixed-height cells */
.view--brand-elements .img-cell picture { display: block; }

/* Layout video: Figma desktop = 933×451px */
.view--brand-elements #layouts .logo-img-block {
  aspect-ratio: 933 / 451;
}

/* ──────────────────────────────────────────────────────────
   TABLET (441px – 999px)
   ────────────────────────────────────────────────────────── */

@media (max-width: 999px) {

  /* Layout video: fixed 451px height at tablet, matching other media blocks */
  .view--brand-elements #layouts .logo-img-block {
    aspect-ratio: auto;
    height: 451px;
  }
}

/* ──────────────────────────────────────────────────────────
   MOBILE (≤ 440px)
   ────────────────────────────────────────────────────────── */

@media (max-width: 440px) {

  /* Section spacing: 40px gap between header and content */
  .view--brand-elements .section-block { gap: 40px; }

  /* Layout video: match 361×464px portrait format used across all mobile media blocks */
  .view--brand-elements #layouts .logo-img-block { height: 464px; }

  /* Photography 01 portrait hero: override tablet 400px → 464px */
  .view--brand-elements #photography > .logo-img-block { height: 464px; }
  .view--brand-elements #photography > .logo-img-block img {
    height: 100%;
    object-fit: cover;
  }

  /* Photography 06 portrait hero (inside media-stack): 464px */
  .view--brand-elements #photography .media-stack > .logo-img-block { height: 464px; }
  .view--brand-elements #photography .media-stack > .logo-img-block img {
    height: 100%;
    object-fit: cover;
  }

}