html * {box-sizing:border-box;}

body {
	font-family: system-ui, sans-serif;
	font-size: 100%;
}

header {
	background-color: #eee;
}
header>* {outline: 1px dotted red;}

.main-grid {
	display: grid;
	gap: 1em;
}

.col-1 {
grid-column: 1/-1;
}

header.main-grid 




@media (min-width: 600px) {
.main-grid {
grid-template-columns: repeat(12, minmax(0,1fr) );
grid-template-rows: repeat(3, minmax (0,1fr));

}

    .col-2-start {
         grid-column: 1/7;
}

.col-2-end {
         grid-column: 7/-1;
}

.col-3-start {
	grid-column: 1/5;
}

.col-3-mid {
	grid-column: 5/9;
}

.col-3-end {
	grid-column: 9/-1;
}