Split hero with image

<section class="split">
  <div class="copy">
    <h1>Cloth you can trace back to the mill</h1>
    <p class="lede">Every shirt we cut lists the mill, the weave and the week it was made.
    Nothing is sourced through a middleman.</p>

    <ul class="points">
      <li>Milled in Yorkshire and northern Portugal</li>
      <li>Cut in runs of fifty, never more</li>
      <li>Sixty days to change your mind</li>
    </ul>

    <div class="actions">
      <a class="btn" href="/shirts/">See the shirts</a>
      <a class="link" href="/mills/">How we choose a mill</a>
    </div>
  </div>

  <div class="art">
    <img src="https://placehold.co/900x1000/e8ecf4/8593ab?text=Linen+on+the+loom"
         alt="A bolt of oatmeal linen on a loom" width="900" height="1000">
  </div>
</section>

* { box-sizing: border-box; margin: 0; }

body { font: 16px/1.65 system-ui, -apple-system, sans-serif; color: #16202e; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 28px;
}

.copy h1 {
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.lede { margin-top: 18px; font-size: 1.08rem; color: #5b6b83; max-width: 46ch; }

.points { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.points li {
  position: relative;
  padding-left: 26px;
  font-size: .95rem;
  color: #5b6b83;
}

.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 14px;
  height: 8px;
  border-left: 2px solid #1f8a5b;
  border-bottom: 2px solid #1f8a5b;
  transform: rotate(-45deg);
}

.actions { margin-top: 30px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  font-size: .97rem;
  font-weight: 500;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 10px;
  background: #3b4fe4;
  color: #fff;
}

.btn:hover { background: #2a3abf; }

.link { font-size: .95rem; color: #3b4fe4; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

.art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 10;
  object-fit: cover;
  border-radius: 16px;
  background: #eef1f6;
}

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 36px; padding: 44px 22px; }
  /* image first on mobile: it loads while the copy is being read */
  .art { order: -1; }
  .art img { aspect-ratio: 16 / 10; }
}