<div class="container">
   
   <div class="row">
      <h3 class="presents">Fox Searchlight, Film4 and Waypoint Entertainment Present</h3>
   </div>
   
   <div class="row actors">
      <h2><span class="olivia"><span class="big">O</span>livia</span> <span class="colman"><span class="big">C</span>olman</span></h2>
      <h2><span class="emma"><span class="big">E</span>mma</span> <span class="stone"><span class="big">S</span>tone</span></h2>
      <h2 class="right"><span class="rachel"><span class="big">R</span>achel</span> <span class="weisz"><span class="big">W</span>eisz</span></h2>
   </div>
   
   <div class="row"><h1 class="the">The</h1></div>
   
   <div class="row"><h1><span class="big">F</span>avourite</h1></div>
   
   <div class="row production">
      
      <div class="directed">
         <p>Directed</p>
         <p>by</p>
         <h3></h3>
         <h3></h3>
         <h3></h3>
         <h3><span class="big">Y</span>orgos<span class="big">L</span>anthimos</h3>
      </div>
      
      <div class="produced">
         <p>Produced</p>
         <p>by</p>
         <h3><span class="big">C</span>eci<span class="big">D</span>empsey</h3>
         <h3><span class="big">E</span>d<span class="big">G</span>uiney</h3>
         <h3><span class="big">L</span>ee<span class="big">M</span>agiday</h3>
         <h3><span class="big">Y</span>orgos<span class="big">L</span>anthimos</h3>
      </div>
      
      <div class="written">
         <p>Written</p>
         <p>by</p>
         <h3><span class="big">D</span>eborah</span><span class="big">D</span>avis</h3>
         <h3></h3>
         <p class="and">and</p>
            <h3><span class="big">T</span>ony<span class="big">M</span>c<span class="big">N</span>amara</h3>
      </div>
   
   </div>

   <div class="row plot">
      <p>Early 18th century. England is at war with the French. Nevertheless, duck racing and pineapple eating ar thriving. A frail Queen Anne (Olivia Colman) occupies the throne and her close friend Lady Sarah (Rachel Weisz) governs the country in her stead while tending to Anne's ill health and mercurial temper. When a new servant Agigail (Emma Stone) arrives, her charm endears her to Sarah. Sarah takes Abigail under her wing and Abigail sees a chance at a return to her aristocratic roots. As the politics of war become quite time consuming for Sarah, Abigail steps into the breach to fill in as the Queen's companion. Their burgeoning friendship gives her a chance to fulfill her ambitions and she will not let woman, man, politics or rabbit stand in her way.</p>
   </div>

   <div class="row date"><h4>In theatres November 23, 2018</h4></div>

</div>

html {
   font-size: 12px; /* 1 rem */
}

body {
   height: 100vh;
   width: 100vw;
   background-color: black;
   font-family: 'Sorts Mill Goudy', serif;
   color: rgb(248, 248, 248);
}

.container {
   box-sizing: border-box;
   height: 800px;
   width: 600px;
   margin: 0 auto;
   background-color: rgb(11,11,11);
   text-transform: uppercase;
   padding: 5rem 2.5rem;
   display: flex;
   flex-direction: column;
   align-items: stretch;
}

.row {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   text-align: justify;
   text-align-last: justify;
}

.row > * {
   width: 100%;
}

.presents {
   font-size: .7rem;
   letter-spacing: .2rem;
   margin-bottom: 4rem;
}

.actors h2 {
   font-size: 2.2rem;
   line-height: 3rem;
}

.actors h2 span.big {
   font-size: 2.8rem;
}

.olivia {
   letter-spacing: .75rem;
}

.colman {
   letter-spacing: .3rem;
}

.emma {
   letter-spacing: 1.4rem;
   margin-left: .45rem;
}

.stone {
   letter-spacing: .9rem;
   margin-left: .45rem;
}

.actors h2.right {
   text-align: right;
   text-align-last: right;
   margin-bottom: 4rem;
}

.rachel {
   letter-spacing: .8rem;
   margin-right: -.4rem;
}

.weisz {
   letter-spacing: 1.6rem;
   margin-right: -1.3rem;
}

h1 {
   font-size: 7rem;
   letter-spacing: .1rem;
   margin-bottom: 3rem;
}

h1.the {
   font-size: 3.5rem;
   letter-spacing: 18.5rem;
   margin-bottom: .8rem;
}

h1 span.big {
   font-size: 10rem;
}

.directed,
.produced,
.written {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
}

.produced {
   margin: 0 1.8rem;
}

.production p {
   margin-bottom: .8rem;
}

.production h3,
.production p.and {
   margin-bottom: .2rem;
}

.production h3:empty {
   margin-bottom: 1.4rem;
}

.production p {
   font-size: .6rem;
}

.production h3 {
   font-size: .9rem;
}

.production h3 span.big {
   font-size: 1.2rem;
}

.production p.and {
   line-height: 1.2rem;
}

.directed p:nth-of-type(1) {
   letter-spacing: 1.6rem;
   margin-right: -1.6rem;
}

.directed p:nth-of-type(2) {
   letter-spacing: 13.6rem;
   margin-right: -13.6rem;
}

.directed h3 {
   letter-spacing: .29rem;
   margin-right: -.29rem;
}


.produced p:nth-of-type(1) {
   letter-spacing: 1.55rem;
   margin-right: -1.55rem;
}

.produced p:nth-of-type(2) {
   letter-spacing: 13.6rem;
   margin-right: -13.6rem;
}

.produced h3:nth-of-type(1) {
   letter-spacing: .73rem;
   margin-right: -.73rem;
}

.produced h3:nth-of-type(2) {
   letter-spacing: 1.3rem;
   margin-right: -1.3rem;
}

.produced h3:nth-of-type(3) {
   letter-spacing: .88rem;
   margin-right: -.88rem;
}

.produced h3:nth-of-type(4) {
   letter-spacing: .3rem;
   margin-right: -.3rem;
}

.written p:nth-of-type(1) {
   letter-spacing: 1.52rem;
   margin-right: -1.52rem;
}

.written p:nth-of-type(2) {
   letter-spacing: 11.3rem;
   margin-right: -11.3rem;
}

.written h3:nth-of-type(1) {
   letter-spacing: .37rem;
   margin-right: -.37rem;
}

.written p:nth-of-type(3) {
   letter-spacing: 5.3rem;
   margin-right: -5.3rem;
}

.written h3:nth-of-type(3) {
   letter-spacing: .25rem;
   margin-right: -.25rem;
}

.production {
   margin-bottom: 3rem;
}

.plot p {
   font-size: .7rem;
   text-transform: none;
   text-align-last: left;
   line-height: .75rem;
   letter-spacing: .05rem;
   margin-bottom: 5rem;
}

.date {
   font-size: 1.8rem;
   letter-spacing: .3rem;
}