<section id="header">
    <div class="container">
      <div class="text-area">
        <p>Hello World</p>
        <h2 class="subtitle">This is a new World!</h2>
      </div>
      <div class="logo-area">
        <img src="https://img.etimg.com/thumb/msid-75488540,width-640,resizemode-4,imgsize-573673/low-power-mode.jpg" alt="">
      </div>
      <div class="image-area"><img src="assets/images/img1.png" alt=""></div>
    </div>
  </section>

body {
  font-size: 19px;
  line-height: 30px;
  font-family: "Monument-Regular";
  color: #D8D8D8;
}

.subtitle {
  text-transform: uppercase;
  font-size: 50px;
  line-height: 57px;
}

.container {
  width: 70%;
  float: right;
  margin-right: 3.6%;
}

#header {
  background: black;
  width: 100%;
/*   height: 130vh; */
}
#header .container {
  height: 80%;
  display: grid;
  grid-template-columns: 550px 1fr;
  grid-template-rows: 310px 1fr;
}
#header .container .text-area .subtitle {
  margin-top: 30px;
}
#header .container .logo-area {
  justify-self: right;
}
#header .container .image-area {
  grid-column: 1/3;
}
#header .container .image-area img {
  object-fit: cover;
  width: 100%;
  height: auto;
}