/* BASIC PAGE STYLES */ 
body {
	font-family: Arial, sans-serif;
	margin: 20px;
	line-height: 1.5;
}

.page{
	max-width: 1100px;
	margin: 0 auto;
}

.header{margin-bottom: 16px;
}

.section{border: 2px solid #333;
border-radius: 12px;
padding: 14px;
margin: 16px 0;
}

.label{
	font-size: 14px;
	opacity: 0.85;
}

.small{font-size: 12px;
margin-top: 10px;
}

code{background: #f4f4f4;
padding: 2px 6px;
border-radius: 6px;
}

/* FLEX DEMO (1D) */ 

.flex-container{
	display: flex;
	gap: 12px;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #999;
	border-radius: 10px;
	padding: 12px;
}

.flex-card{
	flex: 1;
	border: 1px solid #aaa;
	border-radius: 10px;
	padding: 14px;
	min-height: 80px;
}

.flex-card.big{flex: 2;}

/* GRID DEMO (2D) */ 
.grid-container{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	border: 1px solid #999;
	border-radius: 10px;
	padding: 12px;
}

.grid-box{
	border: 1px solid #aaa;
	border-radius: 10px;
	padding: 14px;
	min-height: 70px;
}

.grid-box.wide{grid-column: span 2;
}

/* MEDIA SECTION LAYOUT */ 

.media-grid{display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}

.panel{
	border: 1px solid #999;
	border-radius: 10px;
	padding: 12px;
}

/* RESPONSIVE IFRAME BOX 9works without media queries) */ 

.ratio{position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
border-radius: 10px;
overflow: hidden;
border: 1px solid #aaa;
margin-top: 10px;
}

.ratio iframe{
	position: absolute;
	inset: 0
	width: 100%;
	height: 100%;
	border: 0;
}