<div class="grid">
  <div>
    <p class="feature-letter">R</p>
    <p class="feature-intro start">Renean eu leo quam. Peflentesque ornare sem lacinia quam venenatis vestibulum.</p>

    <p class="feature-intro">Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

    <p class="feature-intro">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.</p>
    <p class="feature-intro">Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum
      at eros.</p>

    <p class="feature-intro"> Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
      risus. Nullam quis risus eget urna mollis ornare vel eu leo.</p>

  </div>
  <div>
    <div class="nestedGrid">

      <div class="text1">
        <img src="https://images.unsplash.com/photo-1515462277126-2dd0c162007a?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
        <h2>Auctor fringilla</h2>
        <span>lacinia</span>
        <p>Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor
          fringilla.</p>
      </div>

      <div class="text2">
        <h2 class="hasBg">Nibh</h2>
        <span>Justo Condimentum</span>
        <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>

        <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus
          posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.</p> <img src="https://images.unsplash.com/photo-1503198515498-d0bd9ed16902?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" class="inlineImage" /></div>

      <div class="text3">
        <img src="https://images.unsplash.com/photo-1464979209783-2e8c3e2a5538?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />

        <h2 class="hasBg">Tristique Tortor Risus</h2>
        <span>lacinia</span>

        <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod.</p>

        <img src="https://images.unsplash.com/38/1Di8seNRo6bK8c9xq5Cw_Italia%20Ferris.jpg?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />

        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper.</p>
      </div>

      <!--       
       <div class="text3">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla.</div>
       
        <div class="image4"><img src="https://images.unsplash.com/photo-1503431128871-cd250803fa41?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" /></div> -->

    </div>

  </div>
</div>

.grid {
  display: grid;
  margin: 2rem;
  grid-template-columns: 100%;

  @media screen and (min-width: 1000px) {
    grid-template-columns: 50% 50%;
  }
}

.feature-letter {
  font-family: "Work Sans", sans-serif;
  line-height: 1;
  font-weight: 900;

  font-size: calc(
    100px + (550 - 100) * ((100vw - 320px) / (1000 - 320))
  ); //550px;
  margin: 0;
  background-image: url(https://images.unsplash.com/photo-1543871673-fb355dc4e349?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  background-size: cover;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  float: left;
  shape-margin: 0.5rem;
  shape-outside: polygon(
    6.13% 18.73%,
    5.97% 84.82%,
    39.05% 84.64%,
    43.15% 60.82%,
    66.73% 83.73%,
    101.49% 83.64%,
    79.49% 59.81%,
    89.11% 54.91%,
    94.27% 48.09%,
    96.59% 36.55%,
    91.11% 25%,
    74.52% 19.27%
  );
}

.feature-intro {
  font-family: "Playfair Display", serif;
  font-size: 0.85rem;
  letter-spacing: 0.052rem;
  font-feature-settings: "liga" 1;  
  font-variant-ligatures: common-ligatures;

  &.start {
    margin-top: 1rem;
    line-height: 1.4;

    &::first-letter {
      font-size: 28px;
      border-left: 1px solid black;
      border-bottom: 1px solid black;
      padding: 0 0 0 5px;
    }
  }
}

.nestedGrid {
  font-family: "Playfair Display", serif;
  font-size: 0.65rem;
  letter-spacing: 0.052rem;
  margin: 1rem;
  grid-gap: 1.25rem;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "text1"
    "text2"
    "text3";

  @media screen and (min-width: 400px) {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "text1 text2"
      "text1 text2"
      "text3 text3";
  }

  @media screen and (min-width: 1000px) {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "text1 text2 text3"
      "text1 text2 ."
      ". . .";
  }

  img {
    width: 100%;
  }
}

.image1 {
  grid-area: image1;
}

.image2 {
  grid-area: image2;
}

.text1 {
  grid-area: text1;
  align-items: start;
}

.text2 {
  grid-area: text2;
}

.text3 {
  grid-area: text3;
}

// Text
h2 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-style: italic;
  transform: translateX(-0.5rem);
}

p + img,
img + h2 {
  margin-top: 0.5rem;
}