/* The media and its introduction form one first screen on mobile.
   Desktop keeps the prompt alongside the preview. */
.material-stage {
  display: contents;
}
.material-intro {
  grid-column: 1 / -1;
}
.material-intro .detail-heading {
  margin-bottom: 0;
}
/* Metadata determines the preview format; the catalog thumbnail stays 4:5. */
.material-media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--media-ratio, 1 / 1);
}
.material-media > :is(video, img) {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #e6eff5;
}
.material-media > video {
  background: #172330;
}
@media (max-width: 760px) {
  .material-layout {
    display: block;
  }
  .material-stage {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: calc(100svh - var(--header-height));
    padding-bottom: 16px;
  }
  .material-intro {
    flex: none;
    padding: 0;
  }
  .material-intro .breadcrumbs {
    margin: 14px 0 12px;
  }
  .material-intro h1 {
    font-size: clamp(1.75rem, 7.6vw, 2.125rem);
    line-height: 1.15;
  }
  .material-intro .detail-heading {
    margin-bottom: 16px;
  }
  .material-intro .lead {
    font-size: var(--text-sm);
    margin: 10px 0 12px;
    line-height: 1.5;
  }
  .material-preview {
    display: flex;
    flex-direction: column;
    flex: none;
    min-height: min-content;
    border-radius: 16px;
  }
  .material-media {
    flex: none;
    min-height: 0;
  }
  .material-media > :is(video, img) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .material-preview .media-disclosure {
    flex: none;
    font-size: var(--text-xs);
    line-height: 1.45;
    padding: 10px 12px;
  }
  .repeat-panel {
    margin-top: 12px;
  }
}