amis2/scss/components/_cards.scss

.#{$ns}Cards {
    &-toolbar {
        @include clearfix();
        padding: $Cards-toolbar-paddingY $Cards-toolbar-paddingX;
        margin-bottom: $gap-base;
    }

    &-actions {
        display: inline-block;

        > * {
            margin-right: $Crud-toolbar-gap;
        }
    }

    &-heading {
        padding: $gap-xs 0;
    }

    &-header {
        padding: $Cards-toolbar-paddingY $Cards-toolbar-paddingX;

        > * + .#{$ns}Button,
        > * + .#{$ns}ButtonGroup,
        > * + .#{$ns}ButtonToolbar {
            margin-left: $Crud-toolbar-gap;
        }
    }

    &-header + &-toolbar {
        padding-top: 0;
    }

    &-fixedTop {
        position: absolute;
        background: $white;
        z-index: -1;
        opacity: 0;
        box-shadow: $Cards-fixedTop-boxShadow;
        padding: $gap-sm;

        &.in {
            position: fixed;
            opacity: 1;
            z-index: $zindex-affix;
        }

        .#{$ns}Cards-toolbar {
            margin-bottom: 0;
        }

        &:empty {
            display: none;
        }
    }

    &--unsaved &-heading {
        background: $Cards--unsaved-heading-bg;
        color: $Cards--unsaved-heading-color;
        padding: $gap-xs $gap-sm;
        margin-bottom: $gap-sm;
    }

    &-dragTip {
        color: $text--loud-color;
        clear: both;
        margin-top: $gap-xs;
    }

    &-placeholder {
        background: $white;
        color: $text--muted-color;
        text-align: center;
        height: $Cards-placeholder-height;
        line-height: $Cards-placeholder-height;

        border: $Card-borderWidth solid $Card-borderColor;
        border-radius: $Card-borderRadius;
    }

    &--masonry {
        display: block;

        &:after {
            content: none;
        }

        column-gap: 0;
        column-fill: initial;

        > div {
            width: 100%;
            float: none;
            break-inside: avoid;
            max-width: unset;
            display: inline-block;
            flex: unset;
        }
    }
}

@include media-breakpoint-up(sm) {
    .#{$ns}Cards--masonrySm1 {
        column-count: 12;
    }

    .#{$ns}Cards--masonrySm2 {
        column-count: 6;
    }

    .#{$ns}Cards--masonrySm3 {
        column-count: 4;
    }

    .#{$ns}Cards--masonrySm4 {
        column-count: 3;
    }

    .#{$ns}Cards--masonrySm6 {
        column-count: 2;
    }

    .#{$ns}Cards--masonrySm12 {
        column-count: 1;
    }

    .#{$ns}Cards-toolbar {
        display: flex;
        flex-wrap: nowrap;
    }
}

@include media-breakpoint-up(md) {
    .#{$ns}Cards--masonryMd1 {
        column-count: 12;
    }

    .#{$ns}Cards--masonryMd2 {
        column-count: 6;
    }

    .#{$ns}Cards--masonryMd3 {
        column-count: 4;
    }

    .#{$ns}Cards--masonryMd4 {
        column-count: 3;
    }

    .#{$ns}Cards--masonryMd6 {
        column-count: 2;
    }

    .#{$ns}Cards--masonryMd12 {
        column-count: 1;
    }
}

@include media-breakpoint-up(lg) {
    .#{$ns}Cards--masonryLg1 {
        column-count: 12;
    }

    .#{$ns}Cards--masonryLg2 {
        column-count: 6;
    }

    .#{$ns}Cards--masonryLg3 {
        column-count: 4;
    }

    .#{$ns}Cards--masonryLg4 {
        column-count: 3;
    }

    .#{$ns}Cards--masonryLg6 {
        column-count: 2;
    }

    .#{$ns}Cards--masonryLg12 {
        column-count: 1;
    }
}