<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;
}