.smart-tile .card-body h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(1rem, calc(0.2rem + 0.833vw), 1.5rem);
    /* font-size: 1rem; */

}

.smart-tile .card-body p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.8rem, calc(0.05rem + 0.833vw), 1.1rem);
    /* font-size: 0.8rem; */
}

.smart-tile .card-body {
    display: flex;
    flex-direction: column;
}

.smart-tile .tile-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "icon type status"
        "icon name status"
    ;
    column-gap: 0.75rem;
}

/* extra column for the optional info button next to the status */
.smart-tile .tile-header.with-info-button {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
        "icon type status info"
        "icon name status info"
    ;
}

.smart-tile .tile-header .info-button {
    grid-area: info;
    align-self: center;
    padding: 0;
}

.smart-tile .tile-header .icon {
    grid-area: icon;
    align-self: center;
}

.smart-tile .tile-header .component-type {
    grid-area: type;
    text-align: left;
    color: var(--color-primary-dark-grey);
    font-weight: 400;
    font-size: clamp(0.75rem, calc(0.5rem + 0.5vw), 0.9375rem);
}

.smart-tile .tile-header .name {
    grid-area: name;
    margin-bottom: 0;
    text-align: left;
    color: var(--color-primary-dark-grey);
    font-weight: 700;
    font-size: clamp(1rem, calc(0.625rem + 0.75vw), 1.25rem);
}

.smart-tile .tile-header .status {
    grid-area: status;
    justify-self: end;
    align-self: center;
}

.smart-tile .status {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    font-size: 1rem;
}

.smart-tile .status .dot {
    width: clamp(0.875rem, calc(0.055rem + 0.91vw), 1.2rem);
    height: clamp(0.875rem, calc(0.055rem + 0.91vw), 1.2rem);
}

.smart-tile .progress {
    width: clamp(50%, calc(10% + 3vw), 70%);
}

.smart-tile .icon {
    font-size: clamp(1.25rem, calc(0.625rem + 1.875vw), 1.875rem);
    color: var(--color-primary-dark-grey);
    display: flex;
    align-items: center;
}

.smart-tile .tile-divider {
    border-top: 1px solid var(--color-primary-grey);
    margin: 0.5rem 0;
}

.smart-tile .info {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 0.1rem;
}

.smart-tile p {
    margin: 0;
    font-size: 1rem;
}

.smart-tile .info span {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.smart-tile .bar-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.smart-tile .info-divider {
    border-top: 1px solid var(--color-primary-grey);
    margin: 0.35rem 0;
}

@media (max-width: 768px),
(max-width: 1280px) and (orientation: portrait) {
    .smart-tile-grid {
        margin-top: .5rem;
        margin-bottom: .5rem;
        display: flex;
        flex-direction: column;
        gap: .5rem;
        max-width: 100%;
        justify-content: center;
    }
}