@layer components {
  .event-logos { display:flex; gap:1rem; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:.25rem 1rem; justify-content: center;}
  .event-logos a { flex:0 0 clamp(120px, 12vw, 160px); display:block; text-align:center }
  .event-logos img { display:block; width:100%; height:auto; object-fit:contain; border-radius: var(--radius-2) }
  
    @media (max-width: 720px){
		.event-logos {flex-wrap:wrap}
	}

    /* Phones: two wider badges per row. Trim the events section's 10% side
       padding so the badges fill more of the screen (its intro text is capped at
       62ch, so it doesn't over-widen). */
    @media (max-width: 560px){
		#events { padding-inline: 1rem; }
		.event-logos a { flex: 1 1 44%; }
	}
  
}