Change card size on hover

by Anton Ayupov

HTML

<script src="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&amp;amp;subset=cyrillic,cyrillic-ext,latin-ext"></script>
<div class="cards">
  <div class="cards__list">
    <div class="cards__item">
    <div class="cards-item">
      <div class="cards-item__content">
        <div class="cards-item__header">
        <div class="cards-item__icon-wrap">
          <svg class="cards-item__icon" xmlns="http://www.w3.org/2000/svg" width="55" height="49" viewBox="0 0 55 49">
    <path fill="#E21A1A" d="M51.7385549,16.0893199 L51.7385549,48.2794224 L3.26159712,48.2799566 L3.26159712,16.0893199 L7.69276323,10.2085719 L0,0.000606040571 L55,0 L47.30734,10.2085071 L51.7385549,16.0893199 Z M45.2526736,41.7936126 L45.2526736,18.2593499 L39.1862351,10.2083774 L41.9912286,6.48602459 L13.0090755,6.48634395 L15.8139657,10.2083126 L9.74747837,18.2593499 L9.74747837,41.7940038 L45.2526736,41.7936126 Z"/>
  </svg>
        </div>
        <div class="cards-item__title">Сберегательный вариант</div>
        </div>
        <ul class="cards-item__list">
          <li class="cards-item__item">Максимальный 
  размер взносов</li>
          <li class="cards-item__item">Средства наследуются 
  в любое время</li>
          <li class="cards-item__item">Неограниченное 
  число наследников</li>
          <li class="cards-item__item">Неограниченное 
  число наследников</li>
          <li class="cards-item__item">Наследуются средства, 
  сформированные из <strong>личных</strong> взносов</li>
        </ul>
        <a class="cards-item__link" href="#">Тарифы</a>
      </div>
    </div>
    </div>
    <div class="cards__item">
      <div class="cards-item">
        <div class="cards-item__content">
          <div class="cards-item__header">
            <div class="cards-item__icon-wrap">
              <svg class="cards-item__icon" xmlns="http://www.w3.org/2000/svg" width="41" height="51" viewBox="0 0 41 51">
      <path fill="#E21A1A" d="M41,22.7777778...

SCSS

html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 30px;
  background-color: #f2f2f2;
  color: #6f6f6f;
}

strong {
  font-weight: bold;
}

.cards {
  display: flex;
  flex-wrap: wrap;

  &__list {
    margin-left: -10px;
  }

  &__item {
    flex: 0 0 230px;
    max-width: 230px;
    margin-left: 10px;
  }
}

.cards-item {
  height: 100%;
  position: relative;
  font-size: 14px;

  &::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #fff;
     border-radius: 4px;
     transition: 0.2s ease-in-out;
  }

  &__content {
    position: relative;
    z-index: 10;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    transition: 0.2s ease-in-out;
  }

  &__header {
    padding-left: 20px;
    padding-right: 20px;
    flex: 0 0 186px;
    max-width: 186px;
  }

  &__title {
    font-weight: bold;
    color: #002b43;
    font-size: 18px;
    line-height: 1.2222;
  }

  &__list {
    flex-grow: 1;
  }

  &__link {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 38px;
    border-top: 1px solid #efefef;
    text-decoration: none;
    color: #6f6f6f;
    transition: 0.2s ease-in-out;

    &:hover {
      color: #e21a1a;
    }
  }

  &:hover {
    &::before {
      box-shadow: 0 0 8px 1px rgba(#d2d2d2, 0.5);
    }
  }
}