
// Legacy card css
.cards--grid {
    clear: both;
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;

    @include media-breakpoint-only(lg) {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    @include media-breakpoint-only(xl) {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    .card {
        @include media-breakpoint-down(md) {
            flex-direction: row;
            margin-bottom: ($spacer * .5);

            .card-link-top {
                display: inline-flex;
                width: 100%;

                .card-img-top {
                    min-width: 46px;
                    width: auto;
                    padding: 0;
                    border-bottom-left-radius: calc(.25rem - 1px);
                    border-top-right-radius: 0px;

                    .card-image {
                        font-size: 2rem;

                        &::before {
                            padding: 8px;
                        }
                    }
                }

                .card-header {
                    display: flex;
                    align-items: center;
                    border-bottom: 0;
                }
            }

            .card-list-hide {
                display: none;
            }
        }

        @include media-breakpoint-only(lg) {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }

        @include media-breakpoint-only(xl) {
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        }

    }
}

.cards--list {
    .card {
        flex-direction: row;
        margin-bottom: ($spacer * .5);

        .card-link-top {
            display: inline-flex;
            width: 100%;

            .card-img-top {
                width: auto;
                padding: 0;
                border-bottom-left-radius: calc(.25rem - 1px);
                border-top-right-radius: 0px;

                .card-image {
                    font-size: 2rem;

                    &::before {
                        padding: 8px;
                    }
                }
            }

            .card-header {
                display: flex;
                align-items: center;
                border-bottom: 0;
            }
        }
    }

    .card-list-hide {
        display: none;
    }
}
