<div class="container">
  <p><strong>Goal:</strong> Make the first item go full-width on smaller views, but only when there's an odd number of items.</p>
  <p>⚠️ Safari TP and Edge/Chrome Canary only for right now.</p>
  <div class="actions"><button onclick="addItem()">Add Item</button><button onclick="removeItem()">Remove Item</button></div>

  <div class="items">
    <div class="item">
      <div class="item_inner">
        <img src="https://picsum.photos/400/300
" height="300" width="400" alt="">
        <div class="content">
          <h3>Item One</h3>
          <p>Sample text</p>
          <button>Action</button>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="item_inner">
        <img src="https://picsum.photos/id/10/400/300" height="300" width="400" alt="">
        <div class="content">
          <h3>Item Two</h3>
          <p>Sample text</p>
          <button>Action</button>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="item_inner">

        <img src="https://picsum.photos/id/20/400/300" height="300" width="400" alt="">
        <div class="content">
          <h3>Item Three</h3>
          <p>Sample text</p>
          <button>Action</button>
        </div>
      </div>
    </div>
  </div>

</div>

// Boring stuff
body {
  padding: 5vw;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  max-width: 1200px;
  margin: auto;
  width: 100%;
}

.actions {
  display: flex;
  gap: 0.5rem;
}

// Fun stuff
.items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 5vw;

  margin-top: 5vw;
}

.item {
  container-name: item;
  container-type: inline-size;
}

@media (min-width: 320px) and (max-width: 800px) {
  .items {
    grid-template-columns: 1fr 1fr;
  }

  .items:has(.item:last-of-type:nth-of-type(odd)) {
    .item:first-of-type {
      background: #f0f0f0;
      grid-column: 1 / -1;

      .content {
        padding: 1rem;
      }
    }
  }
}

@container item (min-width: 400px) {
  .item_inner {
    display: flex;
    flex-direction: row;
    align-items: center;

    .content {
      padding: 1rem;
    }

    img {
      object-fit: cover;
      width: 50%;
      max-width: 400px;
    }
  }
}

const items = document.querySelector(".items");

function addItem() {
  items.innerHTML += `
  <div class="item">
      <div class="item_inner">
        <img src="https://picsum.photos/id/${Math.floor(
          Math.random() * 80
        )}/400/300" height="300" width="400" alt="">
        <div class="content">
          <h3>New item</h3>
          <p>Sample text</p>
          <button>Action</button>
        </div>
      </div>
    </div>
  `;
}

function removeItem() {
  items.querySelector(".item:last-of-type").remove();
}