<div class="container">
  <div class="left-page">
    <span class="date">19th January 2019</span>
    <span class="cat">Artist & Illustrator</span>
    <h1 class="title">Yuko <span>Shimizu</span></h1>
    <span class="author">by 99U Magazine<span>
  </span>
  </div>
  <div class="right-page">
    <p>Yuko Shimizu (清水裕子) is an award-winning Japanese illustrator based in New York City. She was selected as one of “100 Japanese People The World Respects” (世界が尊敬する日本人) by Newsweek Japan in 2009. Among comic fans, she is best known for her ongoing monthly covers for The Unwritten and her cover art for P. Craig Russell's comic book adaptations of Neil Gaiman’s The Sandman: The Dream Hunters, published by Vertigo (DC Comics).</p>
<p>Her self-titled monograph was published by Gestalten in September 2011, and her children’s book, Barbed Wire Baseball, written by Marissa Moss, was scheduled to be published by Abrams Books in the spring of 2013. She has been a faculty member at the School of Visual Arts since 2003.</p>
<p>Shimizu was born in Tokyo, Japan, and grew up mostly in Kanagawa Prefecture though she and her family spent four years in Westchester County, New York, during her teenage years. She graduated from Waseda University’s School of Commerce in 1988 as valedictorian and soon began her first job in the corporate PR department of one of Tokyo’s largest sogo shoshas. See how this demo was built <a href="https://www.silocreativo.com/en/editorial-design-and-css-grid-inspiration-and-examples/">here</a>.</p>
  </div>
</div>

body {
  margin: 0;
  padding: 0;
  font-family: 'EB Garamond', serif;
}
p {
  margin-top: 0;
}
.container {
  background-color: #00D0C0;
  display: grid;
  grid-template: minmax(100vh, 1fr) / 50% 50%;
}
.left-page {
  grid-column: 1 / 2;
  margin: 30px 0 30px 30px;
  background-color: #fff;
  padding: 30px;
  display: grid;
  grid-template: 50px 1fr 20px / repeat(3, 1fr);
  color: #565052;
}
.left-page .date {
  grid-area: 1 / 1 / 2 / 2;
  font-size: 14px;
  font-style: italic;
}
.left-page .cat {
  font-family: 'Roboto Condensed', sans-serif;
  grid-area: 1 / 3 / 2 / 4;
  justify-self: end;
  text-transform: uppercase;
  border: 2px solid #565052;
  align-self: start;
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0px;
}
.left-page .title {
  font-family: 'Roboto Condensed', sans-serif;
  grid-area: 1 / 1 / 4 / 3;
  text-align: left;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #565052;
  text-transform: uppercase;
  align-self: end;
  font-size: 20vh;
  font-size: calc(0.19 * (100vh - 140px));
  margin: 0;
  letter-spacing: calc(0.06 * (100vh - 140px));
  line-height: 17vw;
  margin-top: calc(-0.07 * (100vh - 140px));
  margin-left: -3vw;
}
.left-page .title span {
  color: #00D0C0;
  display: block;
}
.left-page .author {
  grid-area: 3 / 3 / 4 / 4;
  font-size: 14px;
  color: #00D0C0;
  align-self: end;
  justify-self: end;
  font-style: italic;
  text-transform: uppercase;
  text-align: right;
}
.right-page {
  grid-column: 2 / 3;
  margin: 30px 30px 30px 0;
  background-color: #fff;
  padding: 30px;
  color: #00D0C0;
  font-size: 18px;
  line-height: 1.65;
  border-left: 1px dashed #f1f1f1;
}
.right-page p:last-of-type {
  margin-bottom: 0;
}
.right-page a {
  color: #00D0C0;
}
@media (max-height: 592px) {
  .left-page .title {
    font-size: 85.88px;
    letter-spacing: 27px;
  } 
}
@media (min-width: 800px) and (max-width: 1200px) {
  .left-page .title {
    line-height: 14vw;
  }
}
@media (max-width: 799px) {
    .container {
    grid-template: auto / auto;
  }
  .left-page {
    grid-column: 1 / 2;
    margin: 30px 30px 0;
  }
  .right-page {
    grid-column: 1 / 2;
    margin: 0 30px 30px;
    border-top: 1px dashed #f1f1f1;
    border-left: none;
  }
  
  .left-page .title {
    line-height: 26vw;
  }
}
@media (max-width: 450px) {
  .left-page .title {
    line-height: 1.5;
    font-size: 40px;
    grid-area: 2 / 1 / 4 / 3;
  }
 }