<section class="twocols">
	<div class="twocols-container w-container">
		<div class="col">
			<div>１列目</div>
		</div>
		<div class="col">
			<div>２列目</div>
		</div>
	</div>
</section>

/* ２カラム */
.twocols {
    padding: 100px 0;
    background-color: #f3f1ed;
}

.twocols-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px 25px;
}

@media (min-width: 900px) {
	.twocols-container{
		grid-template-columns: 7fr 3fr;
	}
}

/* 横幅と左右の余白 */
.w-container {
	width: min(92%, 1024px);
	margin: auto;
}

/* カラム内のボックス */
.col div {
	display: grid; 
	place-items: center;
	height: clamp(200px,45vw,400px);
	font-size: 50px;
}
.col:first-child div {
	background:#F9CDE2;
}
.col:last-child div {
	background:#FFDBAC;
}