@import (reference) '@servicetitan/tokens/dist/tokens.less';

@action-menu-item-padding: 12px;
@card-min-width: 330px;
@card-max-width: 700px;
@max-number-of-cards: 3;

.grid {
    grid-template-columns: repeat(auto-fill, minmax(@card-min-width, 1fr));
    max-width: calc(@card-max-width * @max-number-of-cards + @spacing-3 * 2);
}

@media (min-width: 1120px) {
    .grid {
        grid-template-columns: repeat(@max-number-of-cards - 1, 1fr);
    }
}

@media (min-width: 1620px) {
    .grid {
        grid-template-columns: repeat(@max-number-of-cards, 1fr);
    }
}

.brand-card {
    min-width: @card-min-width;
    max-width: @card-max-width;
}

.card-content {
    width: 100%;
}

.card-with-error {
    border-color: @color-red-500;
}