.dx-card {
display: flex;
flex-direction: column;
padding: 1.5rem 0;
border: 1px solid var(--light, var(--primary-color-6)) var(--dark, var(--primary-color-5));
border-radius: 1rem;
background-color: var(--light, var(--primary-color-2)) var(--dark, var(--primary-color-3));
box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
color: var(--secondary-color-4);
gap: 1.5rem;
}
.dx-card-header {
display: grid;
align-items: start;
padding: 0 1.5rem;
gap: 0.5rem;
grid-auto-rows: min-content;
grid-template-rows: auto auto;
}
.dx-card-header:has([data-slot="card-action"]) {
grid-template-columns: 1fr auto;
}
.dx-card-title {
font-size: 1rem;
font-weight: 600;
line-height: 1;
}
.dx-card-description {
color: var(--secondary-color-5);
font-size: 0.875rem;
line-height: 1.25rem;
}
.dx-card-action {
grid-column-start: 2;
grid-row: 1 / span 2;
place-self: start end;
}
.dx-card-content {
padding: 0 1.5rem;
}
.dx-card-footer {
display: flex;
align-items: center;
padding: 0 1.5rem;
}