@layer components {

  .media-object { display:flex; align-items:center; gap: var(--mo-gap, clamp(16px, 3vw, 64px)); 
      justify-content: center;
	}
  .media-object .media { flex: 0 0 var(--mo-media-w, clamp(220px, 40%, 560px)); }
  .media-object .content { flex: 1 1 auto }
  .media-object.reverse { flex-direction: row-reverse }
  
  .media-object h2 {
  	font-size: var(--font-size-large)
  }
  
  .media-object .details {
  	width: 50%;
  }
  
  .media-object img {
  	width: 40%;
  	border-radius: var(--radius-2);
  }

  
}

/* A media object with no image collapses to a single centred column — e.g. a
   venue section before its photo is added (image: null in the edition content). */
@layer components {
  .media-object:not(:has(img)) { display: block; }
  .media-object:not(:has(img)) > .details {
    width: auto;
    max-width: 68ch;
    margin-inline: auto;
    text-align: center;
  }
}

/* Narrow screens: stack the media object so its text (normally width:50%) reads
   full-width instead of a cramped column beside the image. Unlayered so it wins
   over the base @layer rules — same pattern as footer.css. */
@media (max-width: 720px) {
  .media-object { display: block; }
  .media-object > .details,
  .media-object > .content {
    width: auto;
    max-width: 68ch;
    margin-inline: auto;
  }
  .media-object > img,
  .media-object > .media {
    width: min(320px, 70%);
    margin-inline: auto;
  }
  /* Keep the CTA on one line — "Stream, with Conffab Premium" was wrapping in
     the narrower column on phones (extra details padding tipped it over). */
  .media-object .button { white-space: nowrap; }
}