.card-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
.card {
    float: left;
    border-radius: 8px;
    text-align: center;
    margin: 10px;
    box-sizing: border-box;
    color: #fff;
    box-shadow: 0 2px 7px rgba(50, 50, 93, 0.05);
}
.card-4 {
    width: calc(25% - 20px);
}
.card-5 {
    width: calc(20% - 20px);
}
.card-6 {
    width: calc(16.66% - 20px);
}
@media (max-width: 800px) {
    .card {
        width: calc(50% - 20px);
    }
}
@media (max-width: 500px) {
    .card {
        width: calc(100% - 20px);
    }
}
.card-title {
    margin: 10px;
}
.card-number {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 10px;
}
.card-footer {
    margin: 10px;
    font-size: 0.95rem;
}

.dp-red {
    background-color: #F44336;
}
.dp-pink {
    background-color: #E91E63;
}
.dp-purple {
    background-color: #9C27B0;
}
.dp-deep-purple {
    background-color: #673AB7;
}
.dp-indigo {
    background-color: #3F51B5;
}
.dp-blue {
    background-color: #2196F3;
}
.dp-light-blue {
    background-color: #03A9F4;
}
.dp-cyan {
    background-color: #00BCD4;
}
.dp-teal {
    background-color: #009688;
}
.dp-green {
    background-color: #4CAF50;
}
.dp-light-green {
    background-color: #8BC34A;
}
.dp-lime {
    background-color: #CDDC39;
}
.dp-yellow {
    background-color: #FFEB3B;
}
.dp-amber {
    background-color: #FFC107;
}
.dp-orange {
    background-color: #FF9800;
}
.dp-deep-orange {
    background-color: #FF5722;
}
.dp-brown {
    background-color: #795548;
}
.dp-grey {
    background-color: #9E9E9E;
}
.dp-blue-grey {
    background-color: #607D8B;
}