/* The MotionLasers case study: the rules the shared case-study*.css does not cover. Scoped under .cs-mls (data 'class'). */
.cs-mls .ml-logo { width: 190px !important; height: auto !important; }
.cs-mls .ml-hero-shot { object-position: left top !important; }
.cs-mls .ml-person > span { display: block; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .75); }
.cs-mls .ml-person b { display: block; color: #fff; font-weight: 600; }

/* app screens */
.cs-mls .ml-shots span b, .cs-mls .ml-cap b { color: #111; font-weight: 600; }
.cs-mls .ml-ba { margin-top: 32px; }
.cs-mls .ml-ba + .ml-shots { margin-top: 20px; }
.cs-mls .ml-ba span a { display: inline-block; padding: 8px 0; margin: -8px 0; }
@media (max-width: 639px) {
  .cs-mls .ml-shots.ml-ba, .cs-mls .cs-app-strip.ml-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; overflow: visible; padding: 0; }
  .cs-mls .cs-app-strip.ml-strip { margin: 12px 0 0; }
  .cs-mls .ml-shots.ml-ba > li, .cs-mls .cs-app-strip.ml-strip > li { display: flex; flex-direction: column; width: auto; min-width: 0; margin: 0; }
  .cs-mls .ml-shots.ml-ba img, .cs-mls .cs-app-strip.ml-strip img { aspect-ratio: 780 / 1688; height: auto; object-fit: cover; object-position: top; }
  .cs-mls .ml-shots.ml-ba span, .cs-mls .ml-cap { flex: 1; font-size: 13px; line-height: 1.4; padding: 10px 12px; }
  .cs-mls .ml-shots.ml-desk { display: none; }
}
.cs-mls .ml-strip li { display: flex; flex-direction: column; }
.cs-mls .ml-cap { display: block; padding: 8px 10px; font-size: 13px; line-height: 1.35; color: rgba(0, 0, 0, .72); background: #fff; border-top: 1px solid rgba(0, 0, 0, .06); }
@media (min-width: 640px) { .cs-mls .cs-app-strip.ml-strip { display: none; } }