I'm with you (tablilla rol)

<div class="superout"><div class="supertitle">Título <m>Datos extras del tema</m></div><div class="supertext">Texto

</div>
<div class="superquote"><div class="damon"><img src="https://via.placeholder.com/100"/></div> <m>"Pequeña frase" </m></div></div>
<div class="credits"><a href="https://therocketgirl-codes.tumblr.com/"><span class="th th-moon"></span>Lilith</a></div>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700&display=swap" rel="stylesheet">
<style>.superout{width: 500px; background: #111; overflow: hiden; margin: 0 auto;} .supertitle{background: #EEEEEE; padding-top: 60px; padding-left: 20px; padding-right: 20px; width: 460px; height: 80px; color: #000;font-family: Playfair Display; letter-spacing: 3px; font-size: 25px; font-weight: bold; padding-bottom: 20px;} .supertitle m{display: block; font-size: 11px; font-weight: 400; text-transform: uppercase; margin-top: 5px;} .supertext{width: 460px; padding: 20px; background: #111; column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; color: #fff; text-align: justify; font-size: 11px;} .supertext::first-letter{float:left; padding: 20px; font-size: 20px; font-family: Playfair Display; color:} .superquote{width: 460px;padding: 20px; background: #EEEEEE;} .damon{width: 100px; height: 100px; float: left; border-radius: 50%; padding: 5px; border: 2px solid #000;} .damon img{border-radius: 50%;} .superquote m{font-family: Playfair Display; text-transform: uppercase; letter-spacing: 5px; font-size: 20px; color: #000;}.credits{font-size: 10px; text-align: right; width: 300px; text-transform: lowercase; letter-spacing: 3px;} .credits a{color: #B24058;}</style>