title: Equal card size on mobile resolution
body: <p>I have a problem with the size of the cards. On the Desktop side are ok, but on a lower resolution begin to be no longer equal. How should I proceed in this situation? I'm not an expert in css, I work on the backend but I would like in the future to have a correct solution how I could solve something like.</p>
  <p>html</p>
  <pre><code>&lt;div class=&quot;proditem&quot;&gt;
      %PROMO%
  
      &lt;div class=&quot;proditem_cover&quot;&gt;
          &lt;a href=&quot;%LINK%&quot;&gt;%COVER%&lt;/a&gt;
          %promo_period%
      &lt;/div&gt;
      &lt;h3 class=&quot;protitem_title&quot;&gt;
          &lt;a href=&quot;%LINK%&quot;&gt;%TITLE%&lt;/a&gt;
      &lt;/h3&gt;
  
      &lt;div class=&quot;protitem_price&quot;&gt;
          %PRICE% eur %price_euro%
      &lt;/div&gt;
      &lt;div class=&quot;detalils&quot;&gt;&lt;a class=&quot;button1&quot; href=&quot;%LINK%&quot;&gt;Details&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  
  </code></pre>
  <pre><code>a {
    text-decoration: none;
    color: inherit;
    font-size:16px;}
  
  .list_prod .proditem {
      height: auto;
      max-height: initial;
      float: none;
      display: inline-block;
      margin-bottom: 10px;
      vertical-align: top;
      transition: 0.3s;
      width: 40%;
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
      padding: 2px 16px;
      border: 0 !important;
      border-radius: 1rem;
  
  
  .proditem img {
      width: 170px;
      height: 170px;
      max-width: 10vw;
      max-height: 10vw;
      /* object-fit: cover; */
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ayZfZ.png" rel="nofollow noreferrer">image</a></p>
  <p>As far as I can see, they decrease in size because they don't have the same information, depending on the text and image if they're not equal. How can I make them equal regardless of the information they have?</p>