.card img {
    width: 100%;
    height: 300px;
}

.card {
    margin-bottom: 1.5rem;
    transition: all 0.3s linear;
}

.card:hover {
    box-shadow: 4px 10px 5px 0 rgba(0, 0, 0, 0.5);
}

.card .card-body h4 {
    color: #010059;
}

.card .card-body p {
    color: #00028C;
}

.card .card-body a {
    background: #ED1250;
    border: 2px solid #ED1250;
    color: #fff;
    /* font-size: 20px; */
    letter-spacing: 1px;
    /* padding: .2rem 1.5rem; */
}

.card .card-body a:hover {
    color: #010059;
}

.instructors h1 {
    color: #010059;
}

@media only screen and (min-width: 768px) {
    .cards {
        display: flex;
        /* justify-content: space-between; */
        flex-wrap: wrap;
    }
    .card {
        flex: 0 0 calc(50% - 1rem);
        margin-left: 1rem;
    }
}

@media only screen and (min-width: 1170px) {
    .card {
        flex: 0 0 calc(33.333% - 1rem);
    }
}