// =============================================================================
// CARDS (CSS)
// =============================================================================


.card-figure {
    margin-top: $card-figure-marginTop;
}

.card-figcaption {
    margin: $card-figcaption-margin;
}

.card-figcaption-body {
    display: $card-figcaption-body-display;
}

.card-title {
    font-size: $card-title-fontSize;
    margin: $card-title-margin;

    > a {
        color: $card-title-color;
        text-decoration: $card-title-textDecoration;

        &:hover {
            color: $card-title-color-hover;
        }
    }
}

.card-text {
    margin-bottom: $card-text-marginBottom;
}

.card-figcaption-button {
    border: $card-figcaption-button-border;
    display: $card-figcaption-button-display;
    margin: $card-figcaption-button-margin;

    + .card-figcaption-button {
        margin: $card-figcaption-button-margin;
    }
}

.card-body {
    text-align: center;

    @include breakpoint("small") {
        text-align: left;
    }
}

// =============================================================================
// CARDS (CSS)
// =============================================================================


.card-figure {
    margin-top: $card-figure-marginTop;
}

.card-figcaption {
    margin: $card-figcaption-margin;
}

.card-figcaption-body {
    display: $card-figcaption-body-display;
}

.card-image {
    width: 100%;
}

.card-title {
    font-size: $card-title-fontSize;
    margin: $card-title-margin;

    > a {
        color: $card-title-color;
        text-decoration: $card-title-textDecoration;

        &:hover {
            color: $card-title-color-hover;
        }
    }
}

.card-text {
    margin-bottom: $card-text-marginBottom;
}

.card-figcaption-button {
    border: $card-figcaption-button-border;
    display: $card-figcaption-button-display;
    margin: $card-figcaption-button-margin;

    + .card-figcaption-button {
        margin: $card-figcaption-button-margin;
    }
}

.card-body {
    text-align: center;

    @include breakpoint("small") {
        text-align: left;
    }
}

Add card-image setting to the card component
Add card-image setting to the card component
