@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);
  }

  
}