/*
 * jp-webinare-startjtl-align.css
 * ------------------------------------------------------------------
 * Webinare help-center page — "Weekly webinar for beginners / My start with
 * JTL" section (section.webinare-start-jtl-section).
 *
 * The image column is a flex box (display:flex; justify-content:flex-end) and
 * the <picture> is its flex item. With the column's default align-items:stretch
 * the <picture> stretches to the full (text-driven) column height, so the
 * illustration sits at the TOP with empty space below it. The text column is
 * taller (heading + two paragraphs + the "on pause" note), which drives the row
 * height, leaving the image floating high. align-self:center on the <picture>
 * stops it stretching and centers it on the flex cross-axis (vertical) against
 * the text block — horizontal flex-end alignment is untouched.
 *
 * Scoped to the section class so it only affects this widget. Enqueued from
 * theme/jtl/includes/general.php (gated to the webinars page) — the overrides/
 * auto-loader is a clone-only mu-plugin, so prod needs the explicit enqueue.
 * ------------------------------------------------------------------
 */
.webinare-start-jtl-section .container > .row > [class*="col-"] > picture {
  align-self: center;
}