/* Local mockup: a wide page frame with individually sized content groups. */
:root {
  --section-pad-x: clamp(20px, 3vw, 64px);
}

.container { max-width: none; }

/* These sections already own their outer gutter. Avoid padding it twice. */
.showcase-trio > .container { padding-inline: 0; }

.hero-content { width: 100%; min-width: 0; }
.hero-showcase {
  max-width: clamp(560px, calc((100vh - 460px) * 1.78), 800px);
  margin-top: 0;
}
.hero-promise { margin-top: 0; }
.hero-actions { margin-top: 0; }

#features > .container > .section-title,
#features > .container > .section-description {
  text-align: center;
  margin-inline: auto;
}
#features > .container > .section-title { max-width: 960px; }
#features > .container > .section-description { margin-bottom: 0; }
.trio-copy h3 { margin-top: 0; }

/* The two feature groups form one continuous run of rows. */
#features { padding-bottom: 0; }
#showcase { padding-top: clamp(56px, 8vw, 110px); }

/* Section headings and backgrounds follow the wider page edges. Feature
   compositions stay together, instead of stretching apart on large monitors. */
.trio-row {
  max-width: 1320px;
  margin-inline: auto;
}

.trio-media {
  width: 100%;
  max-width: 620px;
  justify-self: center;
}

/* A moving example should support the copy without filling a whole column. */
.focused-feature-rows [data-focused-feature="Motion on Any Slider"] .trio-media {
  max-width: 500px;
}

.video-cycle--portrait { width: min(100%, 240px); }
/* The absolutely positioned videos have no intrinsic layout width. A definite
   panel width keeps the percentage-sized portrait frame from collapsing. */
.trio-media--portrait { width: min(100%, 286px); }
.focused-feature-rows .trio-media--portrait { width: min(100%, 340px); }

.preview-gallery {
  max-width: 1320px;
  margin-inline: auto;
}

.showcase-split-layout {
  max-width: 1320px;
  margin-inline: auto;
}

.showcase-right {
  width: 100%;
  max-width: 720px;
  justify-self: center;
}

/* Let artwork grow with the screen while keeping paragraphs easy to read. */
.trio-copy {
  width: 100%;
  max-width: 520px;
  justify-self: center;
  min-width: 0;
}

.trio-media, .showcase-left, .showcase-right, .preview-card { min-width: 0; }

@media (min-width: 861px) {
  .trio-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* The library needs less width than its image preview on a large display. */
@media (min-width: 969px) {
  .showcase-split-layout {
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
  }
}

@media (max-width: 860px) {
  .trio-copy { max-width: 620px; justify-self: center; }
}