.grid
  .grid-item.text
    h1 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur recusandae error magni est molestiae doloremque porro necessitatibus quis sint doloribus?
    .paragraph-text
      p Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, optio accusantium saepe commodi iusto tempora dicta porro placeat obcaecati deleniti enim rem ad praesentium perspiciatis dolore doloremque minus aliquid. Labore tempore dolores maxime, fuga neque tenetur eaque eius vero animi nesciunt natus quibusdam non tempora distinctio pariatur, doloremque alias. Accusamus quos aspernatur commodi? Maiores vel dolore consequatur nulla amet saepe quia magnam eaque exercitationem repellendus fuga doloremque tempore nobis repudiandae accusantium voluptas perferendis, distinctio aliquid nesciunt a reiciendis necessitatibus modi! Mollitia, architecto. 

      p Tempora vitae delectus esse reiciendis distinctio deleniti! Maiores asperiores qui est quibusdam? Aliquam dolore inventore harum fuga consequatur quos, architecto pariatur. Molestiae minima quam sit cupiditate totam, non voluptate quisquam at perspiciatis deleniti quibusdam rerum eos modi ad, ut dolores sed debitis. Labore nihil voluptates porro iusto repudiandae a doloremque. Nesciunt temporibus qui ratione dolorum alias unde rem vel magnam? Iusto quas nulla fugit accusantium asperiores autem nam eos amet ex optio nobis ad explicabo, ea corrupti obcaecati eveniet possimus sit, molestias nihil maxime. Fuga commodi necessitatibus minima, maiores at ad nostrum facere rem vero tempore atque praesentium labore veniam! Ratione sapiente dolorem, laboriosam, enim possimus a facere quia minus, atque neque porro nostrum? Tempore ut ea cumque?
      
      p Tempora vitae delectus esse reiciendis distinctio deleniti! Maiores asperiores qui est quibusdam? Aliquam dolore inventore harum fuga consequatur quos, architecto pariatur. Molestiae minima quam sit cupiditate totam, non voluptate quisquam at perspiciatis deleniti quibusdam rerum eos modi ad, ut dolores sed debitis. Labore nihil voluptates porro iusto repudiandae a doloremque. Nesciunt temporibus qui ratione dolorum alias unde rem vel magnam? Iusto quas nulla fugit accusantium asperiores autem nam eos amet ex optio nobis ad explicabo, ea corrupti obcaecati eveniet possimus sit, molestias nihil maxime. Fuga commodi necessitatibus minima, maiores at ad nostrum facere rem vero tempore atque praesentium labore veniam! Ratione sapiente dolorem, laboriosam, enim possimus a facere quia minus, atque neque porro nostrum? Tempore ut ea cumque?
      
      p Tempora vitae delectus esse reiciendis distinctio deleniti! Maiores asperiores qui est quibusdam? Aliquam dolore inventore harum fuga consequatur quos, architecto pariatur. Molestiae minima quam sit cupiditate totam, non voluptate quisquam at perspiciatis deleniti quibusdam rerum eos modi ad, ut dolores sed debitis. Labore nihil voluptates porro iusto repudiandae a doloremque. Nesciunt temporibus qui ratione dolorum alias unde rem vel magnam? Iusto quas nulla fugit accusantium asperiores autem nam eos amet ex optio nobis ad explicabo, ea corrupti obcaecati eveniet possimus sit, molestias nihil maxime. Fuga commodi necessitatibus minima, maiores at ad nostrum facere rem vero tempore atque praesentium labore veniam! Ratione sapiente dolorem, laboriosam, enim possimus a facere quia minus, atque neque porro nostrum? Tempore ut ea cumque?
      
      p Tempora vitae delectus esse reiciendis distinctio deleniti! Maiores asperiores qui est quibusdam? Aliquam dolore inventore harum fuga consequatur quos, architecto pariatur. Molestiae minima quam sit cupiditate totam, non voluptate quisquam at perspiciatis deleniti quibusdam rerum eos modi ad, ut dolores sed debitis. Labore nihil voluptates porro iusto repudiandae a doloremque. Nesciunt temporibus qui ratione dolorum alias unde rem vel magnam? Iusto quas nulla fugit accusantium asperiores autem nam eos amet ex optio nobis ad explicabo, ea corrupti obcaecati eveniet possimus sit, molestias nihil maxime. Fuga commodi necessitatibus minima, maiores at ad nostrum facere rem vero tempore atque praesentium labore veniam! Ratione sapiente dolorem, laboriosam, enim possimus a facere quia minus, atque neque porro nostrum? Tempore ut ea cumque?
      
      p Tempora vitae delectus esse reiciendis distinctio deleniti! Maiores asperiores qui est quibusdam? Aliquam dolore inventore harum fuga consequatur quos, architecto pariatur. Molestiae minima quam sit cupiditate totam, non voluptate quisquam at perspiciatis deleniti quibusdam rerum eos modi ad, ut dolores sed debitis. Labore nihil voluptates porro iusto repudiandae a doloremque. Nesciunt temporibus qui ratione dolorum alias unde rem vel magnam? Iusto quas nulla fugit accusantium asperiores autem nam eos amet ex optio nobis ad explicabo, ea corrupti obcaecati eveniet possimus sit, molestias nihil maxime. Fuga commodi necessitatibus minima, maiores at ad nostrum facere rem vero tempore atque praesentium labore veniam! Ratione sapiente dolorem, laboriosam, enim possimus a facere quia minus, atque neque porro nostrum? Tempore ut ea cumque?
      
      p Tempora vitae delectus esse reiciendis distinctio deleniti! Maiores asperiores qui est quibusdam? Aliquam dolore inventore harum fuga consequatur quos, architecto pariatur. Molestiae minima quam sit cupiditate totam, non voluptate quisquam at perspiciatis deleniti quibusdam rerum eos modi ad, ut dolores sed debitis. Labore nihil voluptates porro iusto repudiandae a doloremque. Nesciunt temporibus qui ratione dolorum alias unde rem vel magnam? Iusto quas nulla fugit accusantium asperiores autem nam eos amet ex optio nobis ad explicabo, ea corrupti obcaecati eveniet possimus sit, molestias nihil maxime. Fuga commodi necessitatibus minima, maiores at ad nostrum facere rem vero tempore atque praesentium labore veniam! Ratione sapiente dolorem, laboriosam, enim possimus a facere quia minus, atque neque porro nostrum? Tempore ut ea cumque?
    
  .grid-item.graphics
    .large-img
      img(src="https://unsplash.it/1500?image=999")
      
    .small-img
      img(src="https://unsplash.it/1500?image=998")
    .small-img
      img(src="https://unsplash.it/1500?image=996")
    .small-img
      img(src="https://unsplash.it/1500?image=995")
    .small-img
      img(src="https://unsplash.it/1500?image=988")

body
  margin: 0

img
  width: 100%
  // border: 1px solid rgba(black, 0.15)
  
.grid
  max-width: 1400px
  margin: auto

@media (min-width: 600px)
  .grid
    display: grid
    grid-template-columns: 1fr 1fr
    grid-gap: 2rem
  
.grid-item
  padding: 1rem
  
h1
  font-family: 'Rozha One', serif
  font-weight: 400
  font-size: 3rem
  line-height: 1
  color: #222
  
.paragraph-text
  columns: 2
  column-width: 300px
  
  p
    font-family: 'Source Sans Pro', sans-serif
    line-height: 1.3
    color: #222
    
    &:first-child
      margin-top: 0
  
@media (min-width: 1024px)
  .graphics
    display: grid
    grid-template-columns: repeat(2, 1fr)
    align-content: start
    grid-gap: 1rem
  
.large-img
  grid-row: 1
  grid-column: 1 / -1