vertically center at 33% height of container

center 33%.jsx

<div className="min-h-screen bg-white">
  <main className="hero hero--split">
    <div className="hero__copy">
      <div className="hero__copy__inner">
        <p className="text-gray-500">
          <Date dateString={date} />
        </p>
        <h1 className="text-4xl font-bold text-gray-900">
          <Link
            href={`/posts/${slug}`}
            className="hover:underline"
            dangerouslySetInnerHTML={{ __html: title }}
          ></Link>
        </h1>
        <p
          className="text-gray-700"
          dangerouslySetInnerHTML={{ __html: excerpt }}
        />
        <div className="flex items-center space-x-4">
          <Avatar author={author} />
        </div>
      </div>
    </div>
    <div className="hero__image">
      {coverImage && (
        <CoverImage title={title} coverImage={coverImage} slug={slug} />
      )}
    </div>
  </main>
</div>

center 33%.scss

.hero {
  &--split {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 2rem;
    padding: 2rem;
    background-color: aqua;

    .hero__copy {
      width: 50%;
      display: flex;
      flex-direction: column;
      position: relative;

      &::before,
      &::after {
        content: "";
        display: block;
        height: 0;
        position: absolute;
        left: 0;
        right: 0;
      }

      &::before {
        top: 0;
        height: 33%;
        background-color: red;
      }

      &::after {
        bottom: 0;
        height: 67%;
        background-color: blue;
      }

      &__inner {
        position: absolute;
        top: 33%;
        transform: translateY(-50%);
        z-index: 1;
      }
    }

    .hero__image {
      width: 50%;
      height: auto;
    }
  }
}