div:not([class]) {
outline: 2px solid black;
padding; 0.5em; 
margin: 1em;


}



@media all and (max-width: 1600px) {
    html {
        font-size: 20px;
    }
}

@media all and (max-width: 1200px) {
    html {
        font-size: 16px;
    }
}

@media all and (max-width: 600px) {
    html {
        font-size: 11px;
    }
}








body {
background: gray;


}


.parent {
	width: 90%;
	max-width: 30rem;
	margin: 0.5rem auto;
	padding: 1rem;
	border: 3px solid #c46;


}

.grid {

display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));

}

.flex_group {

background-color: black;
width : 100%;

}


.flex_group {

display: flex;
gap: 1rem;

}

.flex_grup > * {

flex: 1;	
}


.item {
	background-color: blue;
	border-style: solid;
	border-width: 5px;
	border-color: red;


}

.container {
	background-color: #99a3a4;
	display: grid;
           grid-template-rows: 100px 100px 100px 100px 100px 100px ;
        grid-template-columns: 100px 100px 100px 100px 100px 100px ;	

}


.item-1 {
	grid-row-start: 1;
	grid-row-end: 3;
	grid-column-start: 1;
        grid-column-end: 4;


}


.item-2 {

	grid-row: 1/3;
	grid-column: 4/6;

}


.item-3 {

	grid-row: span 1;
	grid-column: span 6;

}


.item-1 > img  {
width: 100%;


}

.item-2 > h3 {
	font-size: 0.5rem; 
}

.item-3 > h1 {
	color: #fff;
	font-size: 1.5rem;

}