<div class="card_container">
        <div class="card">
          <div class="card_content">
            <div class="card_short">1</div>
            <div class="content_head"></div>
            <div class="contend_body"></div>
          </div>
        </div>
        
        <div class="card">
          <div class="card_content">
            <div class="card_short">2</div>
            <div class="content_head"></div>
            <div class="contend_body"></div>
          </div>
        </div>

.card_container {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  
}

.card {
  
  background: linear-gradient(160deg, rgba(255,255,255,0.00) 60%, #E4E4E4 100%);
  display: flex;
  justify-content: center;
  height: 5em;
  width: 5em;
  align-items: center;
  flex-wrap: wrap;  
  border-radius: 1em;
  transition: width 1s, height 1s; 
  box-shadow: -4px 0px 2px -4px #B4B4B4,4px 0px 2px -4px #B4B4B4,0px 4px 2px -4px #B4B4B4,0px 6px 10px 0px #D1D1D1;
  color: #FFFFFF;
}


.card_short {

  font-size: 1em;
  transition: font-size 1s;
  text-align: center;
  font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  color: silver;  
  
}

.card:hover {
  
  height: 10em;
  width: 10em;

}

.card:hover .card_short {

  font-size: 2em;
}