/* ===== Split Hero (text left, image right) ===== */
.split_hero {
  height: 90vh;
  padding: 5rem 7% 0;
}

/* container */
.split_container {
  height: 100%;
  background: rgb(var(--gray-900));
  border-bottom: 2px solid rgb(var(--gray-400));
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}

/* left column */
.split_container .description {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  width: 50%;
  gap: 1rem;
}

/* main header */
.split_container .description h1 {
  color: rgb(var(--gray-300));
  font-size: var(--font-size-8xl);
  letter-spacing: -0.4rem;
  line-height: 0.95;
  font-weight: 800;
}

/* sub header */
.split_container .description h2 {
  font-weight: 300;
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-3xl);
  color: rgb(var(--gray-500));
  margin-bottom: 1rem;
}

/* paragraph */
.split_container .description p {
  width: 90%;
  color: rgb(var(--gray-300));
  font-size: var(--font-size-l);
  line-height: var(--line-height-2xl);
  font-weight: 300;
}

/* right column */
.split_container figure {
  width: 50%;
  height: 100%;
  max-height: 750px;
  margin: 0; /* reset default figure margin */
}

/* make the image fully cover the right side */
.split_container figure img {
  height: 100%;
  width: 100%;
  display: block;
  object-fit: cover;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .split_container {
    flex-direction: column;
    gap: 0;
    padding-top: 15%;
  }
  .split_container .description,
  .split_container figure {
    width: 100%;
  }
  .split_hero {
    height: auto;
  }
}

@media (max-width: 550px) {
  .split_container .description h1 {
    font-size: var(--font-size-6xl);
    letter-spacing: -0.25rem;
  }
  .split_container .description h2 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
  }
  .split_container .description p {
    font-size: var(--font-size-s);
    line-height: var(--line-height-m);
  }
}