/* GENERATED by packages/design-system/scripts/build-wp.mjs in lonestar-launchpad-com. Do not edit; regenerate. */
/* ---------------------------------------------------------------------------
   COMPONENT: media-figure — bg image + gradient scrim + italic caption
   --------------------------------------------------------------------------- */
.lslp-figure {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--lslp-space-5);          /* 24px */
  overflow: hidden;
}
.lslp-figure__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.lslp-figure__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lslp-x-scrim-figure);
  opacity: 0.89;
}
.lslp-figure__caption {
  position: relative;
  font-family: var(--lslp-font-serif);
  font-size: var(--lslp-h3-size);        /* live varies per figure — see the homepage layer */
  line-height: var(--lslp-h3-line);
  letter-spacing: var(--lslp-h3-tracking);
  font-weight: 400;
  font-style: italic;
  color: var(--lslp-white);
}
/* Tall variants keep the live box sizes (632 / 693) */
.lslp-figure--tall { min-height: 632px; }
.lslp-figure--pos-connect .lslp-figure__media { background-position: 38% 43%; }
.lslp-figure--pos-connect { min-height: 693px; }
/* Stacked under their text (<=1024) the tall figures would run 632-693px of image
   at full width; a landscape box keeps the section readable. */
@media (max-width: 1024px) {
  .lslp-figure--tall,
  .lslp-figure--pos-connect { min-height: 480px; }
}
/* Panel variant — 350px tall, different scrim, tighter padding */
.lslp-figure--panel {
  min-height: 350px;
  padding: var(--lslp-space-4) var(--lslp-space-5);   /* 16px 24px */
}
.lslp-figure--panel .lslp-figure__media::after {
  background-image: var(--lslp-x-scrim-panel);
  opacity: 1;
}
.lslp-figure--pos-35 .lslp-figure__media { background-position: 50% 35%; }