Collage - Savage!

<div class="collage-b1"><div class="imgrand"><img src="https://placehold.jp/200x200.png"/></div><div class="letterb1"><div class="textcoll">Why do I feel like I'm drowning,like <i>I'm running out of air</i>. Why do I feel like I'm falling. When I'm nowhere near the edge. Just let me know, can you be the one to hold and not let me go? <b>Could you be the one to call when I lose control?</b></div></div><div class="fondpatter" style="background:url(https://placehold.jp/300x300.png); background-size:cover;"><span class="titgr">Savage!</span></div><div class="imgchica"><img src="https://placehold.jp/180x180.png"/></div>
</div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>

<link href="https://fonts.googleapis.com/css2?family=Lora:wght@500&family=Playfair+Display:ital,wght@0,500;1,600&display=swap" rel="stylesheet"><style>.collage-b1{width:450px; border:20px solid #fafafa; margin:10px auto; padding:15px; height:450px; overflow:hidden; background:#fff; outline:1px solid #ddd; outline-offset:-20px} .imgrand{width:200px; height:200px; background:#ddd;border:5px solid #fff; outline:1px solid #ccc; transform:rotate(-10deg); margin-top:20px; margin-left:20px;} .fondpatter{width:300px; height:300px; background:#ccc; outline:1px solid #ccc; margin-top:-75px;} .imgchica{ width:180px; height:180px; background:#ccc; border:5px solid #fff; outline:1px solid #ddd; position:relative; top:-210px; right:25px;; float:right;} .letterb1{width:200px; height:130px; backg round:#fff; float:left; top:-235px; position:relative; outlin e:1px solid #eee; left:230px; padding:15px; overflow:hidde;} .imgrand img{width:200px; height:200px;}.imgchica img{width:180px; height:180px;} .textcoll{column-count:2; -webkit-column-count: 2; -moz-column-count: 2; -o-column-count: 2;column-gap: 20px; text-align:justify; line-height:18px; font-size:10px; height:130px; font-family: 'Lora', serif;} .textcoll b, .textcoll i{color:#A33D4B;} .titgr{font-family: 'Playfair Display', serif; font-size:50px; color:#fff; display:block; position:relative; top:170px; text-align:center; transform:rotate(-2deg); padding-right:60px; font-style:italic; text-shadow: -1px -1px 1px #333, 1px -1px 1px #333, -1px 1px 1px #333, 1px 1px 1px #333;} .imgrand:after{width:70px; height:15px; background:#F99B7E; position:absolute; content:""; display:block; top:-4px; left:155px; opacity:.8; transform:rotate(30deg);} .imgchica:before{width:70px; height:15px; background:#F99B7E; position:absolute; content:""; display:block; top:165px; left:-30px; opacity:.8; transform:rotate(30deg);} .cred{margin:3px auto; width:280px; text-align:center;background:#fff;border:1px solid #eee;} .cred a{text-decoration:none; color:#888; text-transform:uppercase; font-size:8px; font-family:arial; letter-spacing:2px;}</style>