<div class="container">
  <div class="picture-box"></div>
  <div class="top-matter">
    <div class="title-box">
      <h1>Powers&nbsp;of <span>Attraction</span></h1>
    </div>
    <div class="byline">
      <p>In the modern world chlorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque asperiores dolores sed expedita eum amet facere suscipit doloribus architecto autem commodi quidem voluptates repellendus.</p>
      <p>By Amanda McCrae</p>
    </div>
  </div>
  <div class="main-article">
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quis nisi sit consectetur quae incidunt est ex magni error nam doloremque enim, corporis sunt aliquam vero nemo necessitatibus! Cum laboriosam, facilis perferendis distinctio ex aspernatur esse, quidem aliquam tenetur impedit, dignissimos voluptate sint culpa error consequatur hic officia. Repellat!</p>
      <p>Velit enim assumenda commodi quas minus fugiat, facilis deserunt mollitia voluptatem sed animi, suscipit tenetur voluptate tempora eius magni hic iusto. Unde voluptatibus enim sint ipsam voluptatum qui culpa, mollitia similique magnam voluptate cupiditate, quia aperiam maiores blanditiis. Magnam consequatur illo fugiat ea tempora eos culpa earum, voluptates dicta.</p>
      <p>Voluptates quaerat, tenetur quos incidunt ipsum eaque fugit. Maiores minima officiis sequi doloremque non accusamus consectetur, inventore, fugiat facilis, praesentium itaque iste odio vel, porro! Aliquid officia nihil explicabo, non quidem odio earum commodi doloribus, dolor neque quod ratione voluptas magnam! Dicta reprehenderit, quasi facilis possimus magni sint iure.</p>
      <p>Voluptatibus nesciunt maiores, ipsa enim id quasi alias placeat, amet aliquid mollitia corporis sunt quia expedita officia aliquam, adipisci, eum voluptatum quaerat cupiditate harum? Inventore a officia, dolores consequatur perferendis atque commodi molestiae repellat odio quibusdam alias perspiciatis nemo facilis. Maxime ullam consequuntur, consequatur repudiandae magni, soluta perspiciatis illo!</p>
      <p>Magnam fugiat earum soluta, magni quos blanditiis suscipit eligendi sapiente, necessitatibus aperiam. Molestias quisquam, officia similique rem adipisci iure atque quod voluptas voluptates laudantium molestiae distinctio culpa placeat, repellendus sed laborum ex voluptatum fuga. Laudantium maiores eos consequuntur, sequi facere autem impedit! Est, eius. Optio, doloribus sit odio corrupti.</p>
      <p>A qui culpa beatae quis natus suscipit voluptatum earum assumenda optio, itaque nobis facere repudiandae illum perferendis eligendi ad minus ab voluptate quae quisquam sint, et consequatur nesciunt! Distinctio nihil, commodi optio perspiciatis cum possimus adipisci ut. At nesciunt exercitationem eius doloribus ullam reiciendis, ipsa magnam, autem nam itaque!</p>
    </section>
    <section>
      <p>Aliquid voluptatem aspernatur, non perferendis, ad labore quas consequatur, nihil atque veritatis ut minus repellat pariatur dolorum excepturi adipisci itaque commodi. Corporis, maxime et deleniti perspiciatis? Facere dolorum delectus, alias maxime quaerat, cum nostrum blanditiis consequuntur, ad explicabo atque, veritatis rerum. Assumenda dolor temporibus non alias dolores accusantium, ea.</p>
      <p>Esse a dolorem modi rem sunt ex, veniam, quasi animi excepturi cumque pariatur beatae delectus quisquam porro, facere quis ipsa sequi nihil blanditiis ipsum vel eaque. Laborum culpa quam unde earum cumque rerum fugiat, aut excepturi nobis numquam ipsa deserunt ex iusto est qui doloribus atque suscipit, consectetur voluptatem.</p>
      <p>Commodi dolorem eligendi qui, reprehenderit tempora. Accusamus asperiores atque, a facilis sapiente voluptatum alias provident ea dicta ab sint quae vero consequuntur! Dolorem iusto veniam alias vero consequatur voluptatum dolorum adipisci voluptatibus corporis porro autem ex, doloribus exercitationem dolores sint libero at quaerat sed error ea. Provident, praesentium quae.</p>
      <p>Tenetur dicta illo commodi non est laborum sit sint, dolorum iusto aliquid ipsum expedita ex et atque, qui voluptate eaque ea cumque, exercitationem minus deserunt illum suscipit quisquam. Eum veritatis, at nemo similique excepturi tempore aspernatur illo ipsum? Accusantium ducimus nihil perferendis, in saepe libero maiores quisquam nam maxime?</p>
      <p>Inventore minima, eos praesentium eligendi assumenda doloremque maiores optio consequatur possimus laboriosam minus nisi quisquam sed debitis aspernatur sequi nam ullam, illum placeat atque quas harum nihil. Fuga maiores odio at, molestiae nemo dolorum, aliquam minima, quisquam facilis eum perspiciatis eius deserunt placeat error voluptas, impedit inventore cumque nobis.</p>
      <p>Ipsum, voluptatum sit quas consequuntur quidem dicta minima, mollitia expedita perspiciatis, ratione ducimus optio reprehenderit fugit dolorem nisi velit id quia! Unde odit aliquid animi quasi quam ipsam similique repellat dolor deleniti! Quisquam minus accusamus, recusandae repellat tempora, quae dignissimos sit at nihil ab aliquid. Ut impedit aut itaque.</p>
    </section>
  </div>
</div>

html, body {
  height:100%;
}
body {
  font-size:100%;
  line-height:1.5;
  font-family:"Roboto Slab", sans-serif;
  background:rgb(29,29,69);
}

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

.group {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

img {
  max-width:100%;
  height:auto;
  vertical-align:baseline;
}

a {
  text-decoration:none;
}

.max(@maxWidth;
  @rules) {
    @media only screen and (max-width: @maxWidth) {
      @rules();
    }
  }

.min(@minWidth;
  @rules) {
    @media only screen and (min-width: @minWidth) {
      @rules();
    }
  }

.container {
  max-width:1600px;
  margin:0 auto;
  background:#fff;
}
.picture-box {
  background-image:url(http://lorempixel.com/800/900/people/9/);
  background-repeat:no-repeat;
  height:300px;
}
h1 {
  font-size:9vw;
  text-transform:uppercase;
  text-align:center;
  line-height:1;
  margin:1em;
  font-family:Bevan, sans-serif;
  span {
    display:block;
    color:tomato
  }
}
.byline {
  font-size:1em;
  color:#555;
  > p:first-child {
    font-style:italic;
  }
}
.byline, .main-article {
  padding:1em;
}
.main-article p {
  margin-bottom:16px;
  text-indent:1em;
}
.main-article section:first-child p:first-child {
  text-indent:0;
}
.main-article section:first-child p:first-child:first-letter {
  float: left;
  color: tomato;
  font-size: 81px;
  line-height: 60px;
  padding-top: 5px;
  padding-right: 8px;
  padding-left: 3px;
  font-weight:100;
}


.min(900px, {
  .container {
    display:flex;
    flex-flow: row wrap;
  }
  .picture-box, .top-matter {
    flex:50%;
    height:100vh;
    min-height:900px;
  }
  .picture-box {
    background-image:url(http://lorempixel.com/800/1200/people/9/);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
  }
  .top-matter {
    display:flex;
    flex-flow:row;
    align-items:stretch;
    justify-content:center;
    background:rgb(240,255,255);
  }
  .title-box {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:200px;
    order:2;
    h1 {
      width:100%;
      display:table;
      font-size:5em;
      text-align:center;
      margin:auto 0;
      transform:rotate(-90deg);
    }
  }
  .byline {
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:400px;
    p {
      font-size:1.25em;
      line-height:1.3;
      text-align:right;
      padding-left:10px;
    }
  }
  .main-article {
    display:flex;
    justify-content:space-between;
    background:#fff;
    padding:4em 2em;
  }
  section {
    width:48%;
  }
});
.min(1200px, {
  .main-article p {
    font-size:1.25em;
  }
  .main-article section:first-child p:first-child:first-letter {
  float: left;
  color: tomato;
  font-size: 105px;
  line-height: 60px;
  padding-top: 13px;
  padding-right: 8px;
  padding-left: 3px;
  font-weight:100;
}
});
.byline p {
  margin-bottom:16px;
}