/*smart-card*/
.smart-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-evenly;
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--smart-surface);
}

smart-card {
    display: inline-block;
    width: 30.5%;
    min-height: 20px;
    margin: 1%;
    box-shadow: var(--smart-elevation-2);
    box-sizing: border-box;
    font-family: Arial;
    font-size: 14px;
}

    smart-card:hover {
        box-shadow: var(--smart-elevation-4);
    }

/* Mobile (landscape) ----------- */
@media only screen and (max-width : 1024px) {
    smart-card {
        display: inline-block;
        width: 47%;
    }
}

/* Mobile (portrait) ----------- */
@media only screen and (max-width : 768px) {
    smart-card {
        display: block;
        width: 100%;
        margin: 0px;
        max-height: 100vh;
        overflow-y: auto;
    }

    .smart-cards smart-card {
        margin: 0px 10px 10px 10px;
    }
}

/* --- Right-To-Left --- */

.smart-card[right-to-left] > .smart-container,
.smart-card[right-to-left].smart-container {
    direction: rtl;
}

/* --- */