/* One fluid wrapper for the supplied, complete 3:2 visuals. */
main .db-page-visual {
  box-sizing: border-box;
  width: calc(100% - 48px);
  max-width: 1120px;
  margin: 24px auto 32px;
  padding: 0;
}
main .db-page-visual > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
@media (max-width: 767px) {
  main .db-page-visual { width: calc(100% - 32px); }
}

/* Independent homepage visuals breathe vertically; other pages keep their spacing. */
main .db-home-visual + .db-home-visual {
  margin-top: clamp(40px, 6vw, 80px);
}

/* Premium frame only for an existing visual immediately after Consultation. */
main dossierbel-consultation + .db-page-visual {
  border-radius: 16px;
  outline: 1px solid var(--db-accent);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--db-accent) 24%, transparent),
    0 12px 38px color-mix(in srgb, var(--db-accent) 16%, transparent),
    0 12px 28px rgb(0 0 0 / 12%);
}
main dossierbel-consultation + .db-page-visual > img {
  border-radius: inherit;
}
html[data-theme=dark] main dossierbel-consultation + .db-page-visual {
  box-shadow:
    0 0 22px color-mix(in srgb, var(--db-accent) 22%, transparent),
    0 12px 38px color-mix(in srgb, var(--db-accent) 12%, transparent),
    0 14px 32px rgb(0 0 0 / 28%);
}
@media (max-width: 767px) {
  main dossierbel-consultation + .db-page-visual { border-radius: 10px; }
}
