/* css/snippets/between-things-that-breathe.css
   Snippet-specific layout for: Between Things That Breathe
*/

.snippet--between-things-that-breathe {
  /* Background image (16:9). Provide the file at this path. */
  --snippet-bg: url("../../img/snippets/between-things-that-breathe.webp");
}

/* The "valley": darkest in the center, lighter towards both sides.
   This makes white text readable without boxing it.
*/
.snippet--between-things-that-breathe .snippet-overlay{
  --half: clamp(120px, 10vmin, 220px); /* half width of the valley */

  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.75) calc(50% - var(--half)),
    rgba(0,0,0,0.95) calc(50% - 48px),
    rgba(0,0,0,0.95) calc(50% + 48px),
    rgba(0,0,0,0.75) calc(50% + var(--half)),
    rgba(0,0,0,0.35) 100%
  );
}

/* Center the block in the "between" area.
   Keep lines left-aligned to avoid manifesto vibes.
*/
.snippet--between-things-that-breathe .snippet-text {
  text-align: center;
  max-width: 54ch;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Centered signature for centered snippet */
.snippet--between-things-that-breathe .snippet-signature {
  text-align: center;
}