card.scss

@use "../../public/styles/global";
@use "../../public/styles/variables/colors";

.card {
    &--component {
        @extend %default--card;
    }
    &-header {
        display: flex;
        justify-content: center;
        flex-flow: column nowrap;
        &-img {
            display: block;
            margin: 0 auto;
            padding: 0 10px;
            max-width: 80%;
            max-height: 50px;
        }
    }
    &-body {
        flex-grow: 1;
        > *:not(:last-child) {
            padding-bottom: 10px;
        }
        &-headline {
            @extend %card-heading;
        }
        &-copy {
            @extend %card-copy;
        }
    }
    &-footer {
        padding: 0 20px;
        &[data-layout="3-up"] {
            display: grid;
            grid-template-columns: repeat(3, 36.156%);
            grid-auto-rows: 1fr;
            > * {
              padding: 0 10px;
            }
        }
        &[data-layout="2-up"] {
            display: grid;
            grid-template-columns: repeat(2, 50%);
            grid-auto-rows: 1fr;
            > * {
              padding: 0 10px;
            }
        }
        [data-layout="3-up"] &-content:last-child {
            border-left: 2px solid colors.$iron;
        }
        [data-layout="3-up"] &-content:nth-child(2) {
            border-left: 2px solid colors.$iron;
        }
        &-link {
            @extend %subtle-link;
        }
        &-icon {
            @extend %link-icon;
            display: inline;
        }
    }
}