@import "dxHelpers/reset";
@import "dxHelpers/text";
@import "dxHelpers/card";

.card-callout {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* in the callout card's case it needs to be subservient to the other items in the grid */
.dx-card-base_override-width {
    height: 100% !important;
    min-height: unset !important;
}

/* title */

.dx-text-display-4 {
    color: inherit;
    margin-bottom: var(--dx-g-spacing-3xl);
    overflow-wrap: hyphenate-word;
    hyphens: overflow;
}

/* label */

.dx-text-button-light {
    color: inherit;
    margin-top: auto;
}

/* callout arrow */

dx-icon {
    display: inline;
    color: inherit;
    margin-left: var(--dx-g-spacing-sm);
}

dx-icon::part(svg) {
    transition: var(--dx-g-transition-transform-2x);
}

.card-callout:hover dx-icon::part(svg) {
    transform: translate(var(--dx-g-spacing-xs));
}

.card-callout:active dx-icon::part(svg) {
    transform: translate(var(--dx-g-spacing-2xs));
}

@media screen and (max-width: 1024px) {
    .dx-text-display-4 {
        margin-bottom: var(--dx-g-spacing-xl);
    }
}