<!-- HTML -->
<div class="grid__container">
  <h1>Powers&nbsp;of <span>Attraction</span></h1>
  <figure>
    <img src="http://lorempixel.com/800/900/people/9/" alt="">
  </figure>
  <div class="des">
    <p>In the modern world chlorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque asperiores dolores sed expedita eum amet facere suscipit doloribus architecto autem commodi quidem voluptates repellendus.</p>
    <p>By Amanda McCrae</p>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quis nisi sit consectetur quae incidunt est ex magni error nam doloremque enim, corporis sunt aliquam vero nemo necessitatibus! Cum laboriosam, facilis perferendis distinctio ex aspernatur esse, quidem aliquam tenetur impedit, dignissimos voluptate sint culpa error consequatur hic officia. Repellat!</p>
    <p>Velit enim assumenda commodi quas minus fugiat, facilis deserunt mollitia voluptatem sed animi, suscipit tenetur voluptate tempora eius magni hic iusto. Unde voluptatibus enim sint ipsam voluptatum qui culpa, mollitia similique magnam voluptate cupiditate, quia aperiam maiores blanditiis. Magnam consequatur illo fugiat ea tempora eos culpa earum, voluptates dicta.</p>
  </div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
}

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

figure {
  margin: 0;
  max-width: 40vw;
}

.des {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
  text-align: right;
  font-style: italic;
  font-size: clamp(1em, 1.2em + 2vw, 1.5em);
}

.des p {
  font-size: 1.25em;
  line-height: 1.4;
}

.des p + p {
  margin-top: 1rem;
}

h1 {
  font-family: chunklet;
  font-variation-settings: "wght" 460;

  writing-mode: vertical-lr;
  justify-self: center;
  align-self: center;
  text-transform: uppercase;
  font-size: clamp(2rem, 3rem + 4vw, 5rem);
  line-height: 1;
  filter: drop-shadow(1px 3px 2px black);
  mix-blend-mode: overlay;
  background: linear-gradient(45deg, #e31313, #108fd7),
    linear-gradient(45deg, #10e428, #e70be200);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.5px;
  background-blend-mode: multiply;
}
h1 span {
  display: block;
  color: tomato;
}

.content {
  column-count: 3;
  line-height: 1.5;
  font-size: clamp(1em, 1.15em + 2vw, 1.25em);
  padding: 0 20px;
  hyphens: auto;
}
.content p + p {
  margin: 1em 0;
}

@supports (not (initial-letter: 5)) and (not (-webkit-initial-letter: 5)) {
  .content p:nth-of-type(1)::first-letter {
    color: tomato;
    float: left;
    font-size: calc(1.15rem * 6.25);
    line-height: 0.7;
    margin: 17px 12px 0 0;
  }
}

@supports (initial-letter: 5) or (-webkit-initial-letter: 5) {
  .content p:nth-of-type(1)::first-letter {
    color: tomato;
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}

.grid__container {
  display: grid;
  grid-template-columns: auto 1fr minmax(auto, 200px);
  grid-template-rows: minmax(400px, max-content) auto;
  grid-template-areas:
    "figure  des     title"
    "content content content";
  gap: 1rem;
  width: 100vw;
  min-height: 100%;
}

figure {
  grid-area: figure;
}

h1 {
  grid-area: title;
}

.des {
  grid-area: des;
}

.content {
  grid-area: content;
}

@font-face {
  font-family: "chunklet";
  src: url(data:application/x-font-woff;charset=utf-8;base64,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AwwAAAMMAAADDAAAAwwAAAMMAAADDAAAAwwAAAMMAAADDAAAAwwAAAAxAAAAAQAAA+j/OAAABAQAAAAAA9wAAQAAAAAAAAAAAAAAAAAAAEQAAwLBAZAABQAIAooCWAAAAEsCigJYAAABXgAyASwAAAAABQAAAAAAAAAAAAABAAAAAAAAAAAAAAAAVUtXTgBAACAAegMg/zgAyAPoAMgAAAABAAAAAAH0AtoAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAEYAAAAMAAgAAgAEACAALgA5AFoAev//AAAAIAAsADAAQQBh////4QAAAAb/wf+7AAEAAAAKAAAAAAAAAAAAQQBCAEAAAAAAABcBGgABAAAAAAABAAgAAAABAAAAAAACAAcACAABAAAAAAADABMADwABAAAAAAAEAAgAAAABAAAAAAAFAA0AIgABAAAAAAAGAAgAAAADAAEECQABABAALwADAAEECQACAA4APwADAAEECQADACYATQADAAEECQAEABAALwADAAEECQAFABoAcwADAAEECQAGABAALwADAAEECQEAAAwAjQADAAEECQEBAAgAmQADAAEECQECABQAoQADAAEECQEDAAoAtQADAAEECQEEAA4APwADAAEECQEFAAwAvwADAAEECQEGABAAywADAAEECQEHAAgA2wADAAEECQEIABIA4wADAAEECQEJAAoA9QADAAEECQEKAAwA/0NodW5rbGV0UmVndWxhcjEuMDAwO1VLV047Q2h1bmtsZXRWZXJzaW9uIDEuMDAwAEMAaAB1AG4AawBsAGUAdABSAGUAZwB1AGwAYQByADEALgAwADAAMAA7AFUASwBXAE4AOwBDAGgAdQBuAGsAbABlAHQAVgBlAHIAcwBpAG8AbgAgADEALgAwADAAMABXAGUAaQBnAGgAdABUAGgAaQBuAFUAbAB0AHIAYQBMAGkAZwBoAHQATABpAGcAaAB0AE0AZQBkAGkAdQBtAEQAZQBtAGkAQgBvAGwAZABCAG8AbABkAEUAeAB0AHIAYQBiAG8AbABkAEgAZQBhAHYAeQBJAHQAYQBsAGkAYwAAAAACAAAAAAAA/7UAMgAAAAAAAAAAAAAAAAAAAAAAAAAAAEQAAAADACQAJQAmACcAKAApACoAKwAsAC0ALgAvADAAMQAyADMANAA1ADYANwA4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)
    format("woff");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.