@layer components {
  /* Content Group – site-wide baseline */
  .content-group{
    display:flex;
    flex-wrap:nowrap;                         /* allow extra items to wrap */
    gap: var(--content-group-gap, 2rem);    /* themable spacing */
    align-items:flex-start;
    overflow-x: visible;                    /* never force a scrollbar */
  }

  /* First-level sections inside the group */
  .content-group > section{
    /* responsive column: min 22rem, ~third each on wide, cap growth */
    flex: 1 1 clamp(22rem, 33.33%, 40rem);
    min-inline-size: 0;                     /* critical: allow shrink */
    box-sizing:border-box;
  }

  /* Safety for long tokens and media */
  .content-group *{ overflow-wrap:anywhere; }
  .content-group img,
  .content-group svg,
  .content-group video{
    max-inline-size:100%;
    height:auto;
    display:block;
  }
  
  	@media all and (max-width: 720px) {
  	
		.content-group {
			flex-wrap: wrap;
		}
		
		.content-group > section {
			flex: 1 1 90%;
		}
	}
}