Eevee - Relaciones

<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald&display=swap" rel="stylesheet"><link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"><div class="marb4"> <div class="marb5"> <div class="marbit"> <div class="marbi"><span class="sf sf-stars"></span></div><div class="marbtit">EEVEE</div><div class="marbsub">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div><div class="marbtm"> <div class="marbre1"> <div class="marbimg5"></div><div class="marbimg6" style="background:url('http://placehold.it/110x150');"></div><div class="marbre2"> <div class="marbre2i"><span class="sf sf-heart"></span> </div><div class="marbre2t">Nombre y Apellido</div></div></div><div class="marbre1"> <div class="marbimg5"></div><div class="marbimg6" style="background:url('http://placehold.it/110x150');"></div><div class="marbre2"> <div class="marbre2i"><span class="sf sf-heart"></span> </div><div class="marbre2t">Nombre y Apellido</div></div></div><div class="marbre1"> <div class="marbimg5"></div><div class="marbimg6" style="background:url('http://placehold.it/110x150');"></div><div class="marbre2"> <div class="marbre2i"><span class="sf sf-heart"></span> </div><div class="marbre2t">Nombre y Apellido</div></div></div></div><div class="marbtm"> <div class="marbre1"> <div class="marbimg5"></div><div class="marbimg6" style="background:url('http://placehold.it/110x150');"></div><div class="marbre2"> <div class="marbre2i"><span class="sf sf-heart"></span> </div><div class="marbre2t">Nombre y Apellido</div></div></div><div class="marbre1"> <div class="marbimg5"></div><div class="marbimg6" style="background:url('http://placehold.it/110x150');"></div><div class="marbre2"> <div class="marbre2i"><span class="sf sf-heart"></span> </div><div class="marbre2t">Nombre y Apellido</div></div></div><div class="marbre1"> <div class="marbimg5"></div><div class="marbimg6" style="background:url('http://placehold.it/110x150');"></div><div class="marbre2"> <div class="marbre2i"><span class="sf sf-heart"></span> </div><div class="marbre2t">Nombre y Apellido</div></div></div></div><div class="marbin1"> <div class="mar2">Dato aqui</div><div class="mar2">Dato aqui</div><div class="mar2">Dato aqui</div><div class="mar2">Dato aqui</div></div></div></div><div id="myscr"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div><style>.marb4{--color1: #F0F7DA; --color2: #CDBB99; --color3: #A37E58; --color4: #000;}.marb4{width: 420px; height: auto; background: var(--color2); padding: 15px; margin: 0 auto;}.marb5{width: 400px; height: auto; padding: 10px; border: 1px solid var(--color3); margin: 0 auto;}.marbit{display: flex;}.marbi{width: 120px; height: 120px; background: var(--color3); color: var(--color2); font-size: 80px; display: flex; justify-content: center; align-items: center;}.marbtit{width: 290px; padding: 5px; font: 45px 'Oswald'; color: var(--color3); text-transform: uppercase;}.marbsub{position: absolute; width: 280px; margin-top: 70px; margin-left: 125px; font: 12px 'Montserrat'; text-transform: lowercase; text-align: justify; color: var(--color4);}.marbtm{display: flex; margin: 0 auto; margin-top: 20px;}.marbre1{display: flex; flex-direction: column;}.marbimg5{width: 100px; height: 150px; background: var(--color3); margin-left: 3px;}.marbimg6{width: 110px; height: 150px; position: absolute; margin-top: 10px; margin-left: 15px; background-size: cover;}.marbre2{display: flex; align-items: center; justify-content: center; font: 11px 'Montserrat'; text-align: justify; color: var(--color4); margin-top: 15px;}.marbre2i{width: 20px; height: 20px; font-size: 15px; background: var(--color3); line-height: 25px; text-align: center; display: flex; align-items: center; justify-content: center; color: var(--color2);}.marbre2t{width: 115px; margin-left: 2px;}.marbin1{display: flex; margin: 0 auto; justify-content: center; margin-top: 15px;}.mar2{width: 80px; height: 20px; background: var(--color3); margin-left: 2px; padding:5px; text-align: center; font: 12px 'Oswald'; text-transform: uppercase; color: var(--color1);}#myscr{font-family: 'Century Gothic'; font-size: 11px; text-align: center; color: var(--color3); margin: 0 auto; margin-top: 1px;}#myscr a{color: var(--color3);text-decoration: none;}</style>