 
 
<style>
* {
 box-sizing: border-box;
}

body {
 font-family: Arial, Helvetica, sans-serif;
	
}

/* Поплавок четыре колонки бок о бок */
.column {
 float: left;
 width: 33%;
 padding: 0 10px;
}

/* Удалите лишние левые и правые поля, из-за заполнения */
.row {margin: 0 -5px;}

/* Очистить поплавки после столбцов */
.row:after {
 content: "";
 display: table;
 clear: both;
}

/* Отзывчивые столбцы */
@media screen and (max-width: 600px) {
 .column {
 width: 100%;
 display: block;
 margin-bottom: 20px;
 }
}

/* Стиль контейнера карточек */
.card {
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 padding: 6px;
 text-align: center;
 background-color: #f1f1f1;
}
</style>