@use "../abstracts/colors" as colors;
$colors: colors.$colors;

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--card-group-gap);
    justify-content: center;
}

.card-container > .card {
    flex: 1 1 var(--card-min-width);
    width: 100%;
}

.card {
    display: flex;
    flex-direction: column;
    overflow: clip;
    border-radius: var(--card-border-radius);
    border-color: var(--card-border-color);
    border-style: var(--card-border-style);
    border-width: var(--card-border-width);
    background-color: var(--card-background-color);
}

.card-header {
    padding-inline: var(--card-header-padding-x);
    padding-block: var(--card-header-padding-y);
}

.card-body {
    flex: 1 1 auto;
    padding-inline: var(--card-body-padding-x);
    padding-block: var(--card-body-padding-y);
}

.card-footer {
    padding-inline: var(--card-footer-padding-x);
    padding-block: var(--card-footer-padding-y);
}



@each $name, $value in $colors {
    .card-#{$name} {
        background-color: #{$value};
        border-color: #{$value};
        color: var(--content-on-#{$name});
    }
}