<section class="intro">
  <div>
    <h1>Be<br />Query</h1>
    <p>We know you want to be
    <p>
  </div>
  <img src="https://images.unsplash.com/photo-1707926578532-1475f78b4b14?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDg3MDA0MjV8&ixlib=rb-4.0.3&q=85" alt="" />
</section>
<section class="bottom">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan.</p>
</section>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wdth@75..100&family=Oswald:wght@600&display=swap");

.intro {
  display: flex;
  justify-content: space-between;
  container-type: size;
  background: rebeccapurple;
  block-size: 80dvb;
  > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2cqi;
    font-size: clamp(1rem, 3cqb + 0.5rem, 4rem);
  }
  & p {
    color: violet;
  }
}

h1 {
  font-family: "Oswald", sans-serif;
  font-size: clamp(1rem, 20cqb + 0.5rem, 10rem);
  line-height: 1.2;
  margin: 0;
}

img {
  inline-size: 50cqi;
  block-size: 100cqb;
  object-fit: cover;
}

.bottom {
  container-type: inline-size;
  background: plum;
  color: #333;
  & p {
    font-size: clamp(1rem, 4cqi + 0.5rem, 3rem);
    padding: 3cqi;
  }
}

@layer presentation {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 1.1rem;
    line-height: 1.55;
    color: white;
    min-block-size: 100dvb;
    background: #d3bdb0;
  }
}