Multiple articles that drop shadow to one another

by Konstantin Rouda

HTML

<section class="c-wrapper">
  <article class="o-article">
  <p>Hey there where ya goin', not exactly knowin', who says you have to call just one place home.</p>
  </article>
  <article class="o-article">
  <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>
  </article>
  <article class="o-article">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  </article>
  <article class="o-article">
  <p>Blast bullet challenge choice clause cleaner comrade crossing crouch diamond drum fleece haze hotel knight lateral loathing mildew moment .</p>
  </article>
  <article class="o-article">
  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia</p>
  </article>
</section>

CSS

HTML {
  font-size: 110%;
  box-sizing: border-box;
}

BODY {
  color: rgba(35, 35, 35, 1);
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

/*Actual Style*/

.c-wrapper {
  max-width: 80vw;
  min-height: 80vh;
  /*Not necessary*/
  transform-style: preserve-3d;
  transform: rotateX(-1deg);
}


.o-article {
  width: 100%;
  min-height: 10vh;
  padding: .1rem; /*prevents margin collapsing*/
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 6px 15px rgba(0, 0, 0, .14);
  text-align: center;
  transform: rotateX(1deg);
}