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

    h1,h2,h3 {
        margin: 0;
    }

    .card {
        flex: 1 0 400px;
        box-sizing: border-box;
        margin: 1rem .25em;
        border: 1px solid rgba(0,0,0,.125);
        border-radius: .25rem;
        background-color: #fff;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);

        > a {
            color: unset;
            text-decoration: none;
        }

        .card-header {
            background-color: red;
            padding: .75rem 1.25rem;
            border: 0px solid rgba(0,0,0,.125);
            border-bottom-width: 1px;
            background-color: $primary-color;
            color: #fff;

            @media screen and (max-width: $breakpoint-xs) {
                border-width: 1px;
            }
        }

        .card-body {
            padding: .75rem 1.25rem;

            @media screen and (max-width: $breakpoint-xs) {
                padding: 0;
            }
        }

        @media screen and (max-width: $breakpoint-xs) {
            flex: 1 0 280px;
            border-width: 0;
            padding-bottom: 15px;
            border-bottom-width: 1px;
        }

        img {
            max-width: 100%;
            max-height: 250px;
            display: inline;
        }

        
    }
 }