/* Real image proportions: the image itself defines its display area. */
.feature-section-media,
.product-page-media {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 32px;
}
.feature-section-media { margin: 28px 0 34px; }
.product-page-media { margin: 0 0 64px; }
.feature-media { grid-column: span 6; min-width: 0; margin: 0; }
.feature-section-media > .feature-media[data-format="landscape"]:only-child { grid-column: 1 / -1; max-width: 960px; }
.feature-media[data-format="portrait"] { grid-column: span 3; max-width: 260px; }
.presentation-media-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}
.presentation-media-open img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
.presentation-media-open:focus-visible,
.presentation-media-close:focus-visible { outline: 3px solid #b7791f; outline-offset: 5px; }
.feature-media figcaption { margin-top: 12px; color: var(--color-text-secondary, #465a52); font-size: .9rem; line-height: 1.5; }
.presentation-media-dialog {
  box-sizing: border-box;
  width: fit-content;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 20px;
  border: 1px solid #40504b;
  border-radius: 8px;
  background: #10211c;
  color: #fff;
  overflow: auto;
}
.presentation-media-dialog::backdrop { background: rgb(5 13 10 / 88%); }
.presentation-media-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 16px; }
.presentation-media-toolbar h2 { margin: 0; color: inherit; font-size: 1rem; font-weight: 600; }
.presentation-media-close { flex: none; min-height: 44px; padding: 8px 16px; border: 1px solid #647c72; border-radius: 4px; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.presentation-media-dialog img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 200px); margin: 0 auto; object-fit: contain; border-radius: 0; }
.presentation-media-dialog p { max-width: 80ch; margin: 16px 0 0; color: #d8e4de; font-size: .95rem; line-height: 1.5; }
html.presentation-media-is-open { overflow: hidden; }
@media (max-width: 680px) {
  .feature-section-media, .product-page-media { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .feature-section-media { margin-block: 24px 28px; }
  .product-page-media { margin-bottom: 40px; }
  .feature-media, .feature-media[data-format="portrait"] { grid-column: 1; }
  .presentation-media-dialog { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 12px; }
  .presentation-media-toolbar { gap: 12px; }
}