<h2 class="test">This is a title</h2>
<div class="magazine">
  <div class="item item-72"><span>This</span> <span class="num">72</span> <span>year-old writer</span></div>
  <div class="item item-photo">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/182774/writer.jpg" alt="">
  </div>
  <div class="item item-50"><span>...Has lived quietly in harvard square for nearly</span> <span class="num">50</span> <span>years.</span></div>
  <div class="item item-40"><span>She has some</span> <span class="num">40</span> <span>plays to her name</span></div>
  <h2 class="item item-bar">For playwright <strong>Rosanna Yamagiwa Alfaro,</strong> It's all adding up</h2>
  <div class="item item-friends"><span>She wrote a new drama about</span> <span class="num">4</span> <span>cambridge friends</span></div>
  <div class="item item-decades"><span>... who have known one another for</span> <span class="num">4</span> <span>decades</span></div>
  <div class="item item-1"><span>It's</span> <span class="num">1</span> <span>big world premiere at the hackathon theatre company.</span></div>
  <div class="item item-byline">By Pati Harican
    <hr> page <span class="num">3</span></div>
</div>

$color-primary: #eecc76;
$color-secondary: #b75a4c;

@font-face {
  font-family: 'Amstelvar-Roman';
  src: url('//s3-us-west-2.amazonaws.com/s.cdpn.io/182774/Amstelvar-Roman-VF.ttf') format("truetype-variations");
}

:root {
  --width: 100;
  --weight: 500;
}

.test {
  display: none;
  font-family: 'Amstelvar-Roman';
  font-size: 20px;
  font-weight: 700;
  font-variation-settings: 'wdth' 400, 'wght' 98;
  transition: 0.3s ease-out;
  
  &:hover {
    font-variation-settings: 'wdth' 120, 'wght' 900;
  }
}

.magazine {
  max-width: 900px;
  margin: 1rem auto;
  display: grid;
  grid-template-columns: 1.35fr 1fr 110px;
  
  @media (max-width: 750px) {
    grid-gap: 0.5rem;
    grid-template-columns: 1fr 1fr;
    
    .item {
      grid-column: initial !important;
      grid-row: initial !important;
    }
    
    .item-bar {
      grid-row: 2 !important;
      grid-column: 1/3 !important;
    }
  }
  
  @media (max-width: 600px) {
    grid-template-columns: 1fr;
    
    .item {
      grid-column: initial !important;
      grid-row: initial !important;
    }
    
    .item-bar {
      grid-row: 2 !important;
    }
    
    .item-40 {
      margin-bottom: 0;
    }
  }
}

.item {
  background: $color-primary;
  text-transform: uppercase;
  padding: 1rem;
  
  .num {
    font-size: 100px;
    font-family: 'Amstelvar-Roman';
    font-variation-settings: 'wdth' var(--width), 'wght' var(--weight);
  }
}

.item-72 {
  position: relative;
  line-height: 1;
  
  @media (min-width: 751px) {
    display: flex;
    flex-direction: column;
    margin-left: 25%;
    padding-left: 3.5rem;
    
    span:last-child {
      align-self: flex-end;
    }
    
    &:before {
      content: "";
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.56 223.64'%3E%3Cg data-name='Layer 2'%3E%3Cg data-name='Layer 1'%3E%3Cpath d='M127.56 182.54c0 27.1-27.73 41.1-64.76 41.1-39.64 0-62.8-11.19-62.8-32 0-13.71 9.39-22.58 24.29-25.64-12.1-3-18.78-10.49-18.78-22.07 0-14.47 9.9-24.85 36.16-28-21.8-5.66-37.32-21.19-37.32-42.9 0-27.71 25.14-44.93 56.38-44.93a76.7 76.7 0 0120.89 2.79C84.9 9.49 98.27 0 110.91 0c10.9 0 16.59 5.73 16.59 14.12 0 7.09-5.15 12.51-12.18 12.51s-9.71-3.81-11.35-8c-1.43-3.19-2.49-5.42-6.09-5.42-4.41 0-9.54 6.15-11.35 19.29 18.19 6.77 30.58 21 30.58 40.54 0 27.63-25.13 45.25-56.38 45.25H60c-29.9 0-37.85 8.78-37.85 18.29 0 9.19 5.17 14.06 21.26 14.06H77.2c34.91.03 50.36 11.16 50.36 31.9zm-15.24 6.78c0-13.27-8.71-21.66-30.11-21.66L41 167.58c-17.37 1.54-23.49 11-23.49 23.23 0 16.94 13.65 28.4 46 28.4 33.35 0 48.81-11.51 48.81-29.89zm-51.59-75.6c19.22 0 33.54-12.49 33.7-40.65-.16-28.16-14.43-40.33-33.7-40.33S27.2 44.91 27 73.07c.2 28.16 14.52 40.65 33.73 40.65z' fill='%23b85a4c'/%3E%3Cg fill='%231d1d1b'%3E%3Cpath d='M43.18 185.18H39l-.81 3.1H35l4.73-15.14h2.8l4.76 15.14H44zm-3.5-2.54h2.83l-1.42-5.4zM54 182.75h-1.51v5.53h-3.06v-15.14h4.88a5 5 0 013.55 1.19 4.45 4.45 0 011.25 3.39 4.4 4.4 0 01-2.19 4.22l2.65 6.2v.14h-3.29zm-1.52-2.55h1.74a1.6 1.6 0 001.37-.61 2.64 2.64 0 00.46-1.62c0-1.52-.6-2.28-1.78-2.28h-1.78zM71.25 175.69H67.5v12.59h-3.06v-12.59h-3.68v-2.55h10.49zM80 184.31a1.92 1.92 0 00-.47-1.4 5.64 5.64 0 00-1.72-1 8.14 8.14 0 01-3.28-2 4.11 4.11 0 01-1-2.74 3.88 3.88 0 011.36-3.08 5.68 5.68 0 015.93-.57 4.07 4.07 0 011.68 1.66 5 5 0 01.59 2.43H80a2.51 2.51 0 00-.45-1.61 1.6 1.6 0 00-1.31-.56 1.64 1.64 0 00-1.24.47 1.78 1.78 0 00-.45 1.28 1.6 1.6 0 00.5 1.13 5.79 5.79 0 001.77 1 7.46 7.46 0 013.21 2 4.35 4.35 0 011 3 3.9 3.9 0 01-1.26 3.09 5 5 0 01-3.42 1.11 5.89 5.89 0 01-2.67-.6 4.52 4.52 0 01-1.89-1.73 5 5 0 01-.68-2.65h3.07a2.88 2.88 0 00.51 1.9 2.06 2.06 0 001.66.59c1.1-.03 1.65-.59 1.65-1.72zM90.69 179.8h2.94v2.73h-2.94v4.23H87.9v-4.23h-3v-2.73h3v-4.06h2.79zM33.49 191.78l2.86 10.94 2.85-10.94h4v15.13h-3.07v-4.09l.28-6.31-3 10.4H35.3l-3-10.4.28 6.31v4.09H29.5v-15.13zM57.05 200.71a7.07 7.07 0 01-1.44 4.73 5 5 0 01-4 1.68 5 5 0 01-4-1.67 6.93 6.93 0 01-1.47-4.67v-2.59a7.46 7.46 0 011.44-4.87 5.48 5.48 0 018 0 7.33 7.33 0 011.47 4.83zM54 198.17a6.2 6.2 0 00-.59-3 2.15 2.15 0 00-3.6 0 5.91 5.91 0 00-.61 2.92v2.7a5.54 5.54 0 00.6 2.92 2 2 0 001.83.94 1.93 1.93 0 001.77-.92 5.5 5.5 0 00.6-2.85zM64.7 202.75l2.54-11h3.41l-4.36 15.13h-3.18l-4.34-15.13h3.39zM76 206.91h-3v-15.13h3zM87.15 200.36h-4.76v4H88v2.53h-8.66v-15.11H88v2.54h-5.61v3.58h4.76zM96.93 202.94a1.9 1.9 0 00-.48-1.4 5.4 5.4 0 00-1.72-1 8 8 0 01-3.27-2 4 4 0 01-1-2.74 3.81 3.81 0 011.36-3.07 5.06 5.06 0 013.44-1.16 5.2 5.2 0 012.49.58 4.13 4.13 0 011.68 1.66 5 5 0 01.59 2.44H97a2.52 2.52 0 00-.45-1.62 1.6 1.6 0 00-1.31-.56 1.63 1.63 0 00-1.25.48 1.8 1.8 0 00-.44 1.27A1.54 1.54 0 0094 197a5.84 5.84 0 001.76 1 7.59 7.59 0 013.24 2 4.35 4.35 0 011 3 3.9 3.9 0 01-1.25 3 5 5 0 01-3.42 1.11 6 6 0 01-2.68-.6 4.49 4.49 0 01-1.88-1.73 5 5 0 01-.68-2.65h3.06a2.88 2.88 0 00.51 1.9 2.09 2.09 0 001.67.6c1.06.01 1.6-.56 1.6-1.69z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E ") no-repeat;
      width: 150px;
      height: 225px;
      position: absolute;
      left: -30%;;
      //outline: solid 1px;
    }
  }
  
  .num {
    font-size: 244px;
    
    @media (max-width: 1200px) {
      font-size: 26.902vw;
    }
  }
}

.item-72,
.item-photo {
  border-right: 1.5px solid;
}

.item-photo {
  grid-column: 1/2;
  padding: 0;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.item-50 {
  grid-row: 1/3;
  grid-column: 2/3;
  padding: 1rem 2rem;
  /* Fix spacing introduced by adding line-height to body */
  line-height: 1;
  border-right: 1px solid;
  
  
  @media (min-width: 751px) {
    margin-top: 6%;
    display: flex;
    flex-direction: column;
  }
  
  span:first-child {
    width: min-content;
    line-height: 1.15;
    margin-top: 2rem;
  }
  
  span:last-child {
    text-align: right;
  }
  
  .num {
    font-size: 300px;
    
    @media (max-width: 1200px) {
      font-size: 24.256vw;
    }
  }
}

.item-40 {
  grid-row: 1/3;
  grid-column: 3/4;
  padding: 1rem;
  
  @media (min-width: 751px) {
    margin-bottom: 120%;
  }
  
  .num {
    position: relative;
    font-size: 140px;
    
    @media (min-width: 751px) {
      left: calc(-50% - 2rem);
    }
  }
  
  span {
    @media (min-width: 751px) {
      word-spacing: 100vw;
    }
  }
}

.item-bar {
  grid-column: 1/4;
  color: #fff;
  background: $color-secondary;
  padding: 8px;
  text-transform: uppercase;
  font-size: calc(12px + 1.5vw);
  font-size: 31px;
  
  strong {
    font-weight: bold;
  }
}

.item-friends,
.item-decades {
  border-right: 1px solid;
  border-bottom: 1px solid;
  padding: 1rem 4rem;
  
  @media (min-width: 751px) {
    display: flex;
    
    .num {
      margin-top: -15px;
      margin-left: -40px;
    }
  }
  
  span:last-child {
    align-self: flex-end;
  }
  
  .num {
    font-size: 130px;
    
    @media (max-width: 1200px) {
      font-size: 14.333vw;
    }
  }
}

.item-decades {
  @media (min-width: 751px) {
    margin-left: 10%;
  }
}

.item-decades {
  grid-column: 1/2;
}

.item-1 {
  grid-column: 2/3;
  grid-row: 4/6;
  border-right: 1px solid;
  border-bottom: 1px solid;
  
  @media (min-width: 751px) {
    display: flex;
  }
  
  .num {
    font-size: 300px;
    
    @media (max-width: 1200px) {
      font-size: 33.076vw;
    }
  }
  
  span:last-child {
    @media (min-width: 751px) {
      position: relative;
      left: -20px;
      bottom: -90px;
      bottom: calc(-2vw - 9vh);
      word-spacing: 100vw; /* Line break for each word */
    }
  }
}

.item-byline {
  grid-column: 3/4;
  align-self: start;
  margin-top: -100%;
  
  hr {
    height: 1px;
    border: 0;
    background: #000;
  }
}

// .item:not(.item-1) {
//   opacity: 0.1;
// }

/******* Non-demo styling *******/

body {
  padding: 1rem;
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 1.25;
  overflow-x: hidden;
}

*,*:before, *:after {
  box-sizing: border-box;
  //outline: solid 1px;
}

img {
  display: block;
  max-width: 100%;
}

let itemBar = document.querySelector('.item-bar');
// let items = document.querySelectorAll(".item-72, .item-50, .item-friends, .item-decades, .item-1");
let items = document.querySelectorAll(".item-72, .item-50");

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    let w = entry.contentRect.width;
    let fz = w/29;
    itemBar.style.fontSize = fz + "px";
  }
});

ro.observe(itemBar);

//////

const ro_2 = new ResizeObserver(entries => {
  for (let entry of entries) {
    let w = entry.contentRect.width;
    let wdth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--width'));
    let f = wdth + w;
    document.documentElement.style.setProperty('--weight', w*1.5);
  }
});

items.forEach(item => {
  ro_2.observe(item);
})