Row height expanding in CSS Grid

Question

I have been working on this for hours and refined my problem down. Now I'm facing this funny behavior where the gap between the two rows increases as the screen width decreases.

I feel defeated and am open to redoing it completely if there are better ways to implement this design.

Design that I am trying to create:

My current progress:

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 1px solid red;
  max-width: 90rem;
  margin: auto;
  width: 90%
}

.blurb-text {
  font-size: 36px;
  color: #000;
  grid-row-start: 2;
  grid-column-start: 2;
  grid-column-end: 5;
  outline: 1px solid green;
  margin: 100px 0 0 50px;
}

.Jumbotext-1 {
  /*border: 2px solid red;*/
  font-size: 156px;
  color: #000;
  font-family: Georgia, 'Times New Roman', Times, serif;
  outline: 1px solid green;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  margin: 0;
}

.Jumbotext-2 {
  font-size: 156px;
  color: #000;
  font-family: Georgia, 'Times New Roman', Times, serif;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  outline: 1px solid green;
  margin: auto;
}

@media screen and (min-width: 320px) {
  .Jumbotext-1 {
    font-size: calc(156px + 6 * ((100vw - 320px) / 680));
  }
}

@media screen and (min-width: 1000px) {
  .Jumbotext-1 {
    font-size: 156px;
  }
}

@media screen and (min-width: 320px) {
  .Jumbotext-2 {
    font-size: calc(156px + 6 * ((100vw - 320px) / 680));
  }
}

@media screen and (min-width: 1000px) {
  .Jumbotext-2 {
    font-size: 156px;
  }
}

@media screen and (min-width: 320px) {
  .blurb-text {
    font-size: calc(36px + 6 * ((100vw - 320px) / 680));
  }
}

@media screen and (min-width: 1000px) {
  .blurb-text {
    font-size: 36px;
  }
}

<div class="grid2">
  <div class="Jumbotext-1">Deliver a unique</div>
  <div class="Jumbotext-2">experience</div>
  <div class="blurb-text">
    We can work together today<br> to create an exceptional product<br> that screams to the world,<br> I belong to you.
  </div>
</div>

I really need some help with this, thank you for your time and consideration!

Answer 1

Here's a rough revision with CSS Grid:

jsFiddle demo

div {
  display: grid;
  grid-template-columns: repeat(10, 10vw);
  grid-template-rows: repeat(10, auto);
  height: 100vh;
  align-items: center;
}

span:nth-child(1) {
  grid-column: 1 / -1;
  font-size: 10vw;
  align-self: end;
  white-space: nowrap;
}

span:nth-child(2) {
  grid-column: 1 / 6;
  font-size: 10vw;
}

span:nth-child(3) {
  grid-column: 6 / -1;
  grid-row: 2 / 3;
  font-family: arial;
  font-size: 2vw;
}

body {
  margin: 0;
  padding: 0 3em;
  font-family: georgia;
  background-color: #222;
  color: #fff;
}

<div>
  <span>Deliver a unique</span>
  <span>experience</span>
  <span>We can work together today<br>to create an exceptional product<br>that screams to the world:<br><br><strong>I belong to you.</strong></span>
</div>