Entitylist remplaza covers por responsive-image

src/components/EntityList.jsx

@@ -32,11 +32,7 @@ const EntityItem = (props) => {
     <li className={'entity-item ' + (item.selected ? 'selected' : '')} id={item.id}>
       <div class="entity-container">
         <Link to={item.link}>
-          {item.cover &&
-            <div className='cover'>
-              {item.cover}
-            </div>
-          }
+          {item.cover && item.cover}
           <div className='body'>
             <span class='title'>{item.title}</span>
             <span className='subtitle'>{item.subtitle}</span>

src/components/EntityList.scss

@@ -13,12 +13,6 @@ ul.entity-list {
       text-decoration: none;
       color: var(--black);
 
-      .cover {
-        width: 200px;
-        height: 200px;
-        background-color: var(--gray-2);
-      }
-
       .body {
         .title {
           font-weight: 500;
@@ -53,10 +47,7 @@ ul.entity-list {
         .body {
           display: flex;
           flex-direction: column;
-        }
-
-        .cover {
-          margin-right: 1em;
+          margin-left: 1em;
         }
       }
 
@@ -79,11 +70,6 @@ ul.entity-list {
   .entity-item {
     padding-bottom: .75em;
     a {
-      .cover {
-        width: 250px;
-        height: 250px;
-      }
-
       .body {
         display: flex;
         flex-direction: column;
@@ -138,13 +124,13 @@ ul.entity-list {
       }
     }
 
-    .cover {
+    .responsive-image {
       outline: none;
       transition: all 300ms ease-in-out;
     }
 
     &:hover, &.selected {
-      .cover {
+      .responsive-image {
         outline: 6px var(--accent) solid;
         outline-offset: -6px;
       }