<div class="container">
  <div class="box a">
    <h1>Acme News</h1>
    <p>All the news that's fit to print</p>
  </div>
  <div class="box b">Site Navigation</div>
  <div class="box c">Links</div>

  <div class="box featured">
    <div class="box e">
      <p><strong>Featured Article</strong></p>
      <h2>Article Title</h2>
    </div>
    <div class="box f">
      <img src="https://doodleipsum.com/600x450/flat?i=370b4a6958d9993fea23d2e40a04d8a8" alt="">
    </div>
    <div class="box g">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta impedit ducimus excepturi natus dolorem suscipit hic expedita ipsam eos veniam, autem iste exercitationem quo quas aliquid ratione officia perferendis ad.</p>
      <p>Earum dolore asperiores, quasi sit consectetur nostrum praesentium at libero a quae. Obcaecati porro excepturi minus accusantium adipisci neque aperiam, harum, ea similique nam ad expedita, ex nihil quas officiis!</p>
      <p>Animi sint reiciendis sapiente debitis, facilis nisi? Officiis esse adipisci, ipsum consequatur minus sed inventore perferendis, aspernatur quasi veritatis cupiditate, natus harum! Accusantium omnis nobis nam odit! Tempore, rerum aut.</p>
      <p>Quis repellat officia sapiente alias et consequatur, ipsa nostrum rem quisquam optio quas facilis fuga facere praesentium sunt accusantium error. Doloremque molestias consequatur natus sunt, voluptates cumque aspernatur est labore!</p>
      <p>Similique saepe quaerat, dicta sit consectetur ea aliquid? Facere excepturi odio architecto at quasi, quidem consequatur iste repellat rem harum labore dolorem dolorum, quia suscipit totam reprehenderit dolores. Ea, ipsam.</p>
    </div>
  </div>

  <div class="box h">H</div>
  <div class="box i">I</div>
</div>

html {
  color-scheme: dark light;
}

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

@supports (grid-template-columns: subgrid) {
  .container {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px,auto);
    background-color: #fff;
    color: #444;
  }
}


.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;

}

.box .box {
  background-color: #ccc;
  color: #444;
}

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

.b {
  grid-row: 2;
  grid-column: 1/6 ;
}

.c {
  grid-column: 1;
  grid-row: 3 / 6;
}

.featured{
  grid-column: 2 / 5;
  grid-row: 3/ 6;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.e {
  grid-row: 1 /2;
  grid-column: 1 ;
}

.f {
  grid-row: 1;
  grid-column: 2 / 4;
  
  > img {
    max-width: 100%;
    max-height: auto;
  }
}

.g {
  grid-row: 2;
  grid-column: 2/4;
}

.h {
  grid-row: 6;
  grid-column: 2/6
}

.i {
  grid-row: 7;
  grid-column: 2/6;
}
 */