/* Sub-site bindings of roles to specific components */
@layer theme {

	:root {
		--v-block-margin-normal: 2rem;
	}
	


	.part.media-object {
		padding-block: clamp(5rem, 6vw, 4rem);
	}

	#events > p{
		width: 60%;
		margin-inline: auto;
		text-align: center;
	}

	#signup > p{
		width: 60%;
		margin-inline: auto;
		text-align: center;
	}
	
	#signup form.form-container {
		width: 60%;
		margin-inline: auto;
	}
	
	#register > p {
		width: 60%;
		margin-inline: auto;
		text-align: center;
	}
	
	.pricing ul {
		font-size: var(--font-size-small);
	}
	
	.pricing .tiers-line {
		font-size: var(--font-size-x-small);
	}
	
	.inclusions {
		margin-block-start: var(--v-block-margin-normal);
		font-size: var(--font-size-small);
		width: 50%;
		line-height: 1.1;
	}
	
	.inclusions > * {
		margin-block: .4em;
	}
	
	#tracks > p {
		width: 60%;
		margin-inline: auto;
	}
	
	#tracks .content-group > section {
		font-size: smaller;
	}
	
	#partners {
		text-align: center;
	}
  
	  #partners > section {
	  	width: 60%;
	  	margin-inline: auto;
	  }
	  
     #about {
     	padding-inline: 0;
     }
	  
	 #about > .media-object {padding-block: 4rem;
	     padding-inline: 2rem;}
	  
	  
	#about > .media-object img {
		width: 30%;
	}
	
	#johnallsopp.media-object img {
		width: 20%;
	}
	
	#about > #johnallsopp.media-object .details {
		width: 75%;
	}
	
		#about > .media-object .details {
		width: 65%;
		padding-inline: 0;
	}
	
	
	#code-of-conduct {
		background-color: var(--color-accent-3);
		color: var(--color-on-accent);
		text-align: center;
	}
	
	
/* narrow */

	@media all and (max-width: 720px) {
	
		nav.page li {
			display: none;
		}
		
		nav.page li:is(:first-child, :nth-child(3), :last-child) {
			display: inline-block
		}
		
	
	
		#page-header p:last-child {
			width: 100%
		}
		
		.media-object img {
			display: none
		}
		
		.media-object .details {
			width: 90%;
			margin-inline: auto;
		}
		
		#tracks > p {
			width: 90%;
		}
		
		#events > p {
			width: 90%;
		}
		
		#signup > p {
			width: 90%;
		}
		
		#signup form.form-container {
			width: 100%
		}
		
		#register > p {
			width: 90%;
			
		}
		
		#partners > section {
			width: 90%;
		}
		
	
	}	

}