from now on - relaciones

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap" rel="stylesheet">

<div class="now20"><div class="now21"><div class="now22">from now on</div>
<div class="now23"><img src="https://via.placeholder.com/100"><br><b>nombre del pj</b><br>frase por aquí</div><div class="now23"><img src="https://via.placeholder.com/100"><br><b>nombre del pj</b><br>frase por aquí</div>
<div class="now23"><img src="https://via.placeholder.com/100"><br><b>nombre del pj</b><br>frase por aquí</div><div class="now23"><img src="https://via.placeholder.com/100"><br><b>nombre del pj</b><br>frase por aquí</div>
</div></div><div class="stcred"><a href="https://stardustcodes.tumblr.com/ "target="_blank">stardust</a></div>

<style>.now20{margin: 0 auto; background: linear-gradient(to right, #55c2d6, #bcbfce, #7d80e0); width: 380px; padding: 15px; border: 15px solid #fff; outline: 1px solid #eee;}.now21{background: #fff; outline: 1px solid #fff; outline-offset: 2px; padding: 35px; display: flex; flex-wrap: wrap; justify-content: space-between;}.now22{width: 310px; font-family: open sans; font-weight: 800; font-size: 22px; color: #7d80e0; text-align: center; text-transform: uppercase; padding-bottom:15px; border-bottom: 1px solid #eee;}.now23{width: 140px; height: 160px; padding: 5px; text-align: center; font-family: open sans; font-weight: 400; font-size: 10px; color: #2e2e2e; line-height: 120%;}.now23 b{font-weight: 800; color: #7d80e0}.now23 img{width: 100px; height: 100px; border-radius: 50%; padding: 5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #bcbfce; border-right: 5px solid #55c2d6;}.stcred{margin: 0 auto; width: 400px; text-align: center;}.stcred a{text-decoration: none; font-family: calibri; font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 3px;}</style>