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

:host {
    --dx-c-heading-max-lines: 4;
    --dx-c-card-grid-max-width: 60px;
}

.card {
    display: flex;
    flex-direction: column;
}

.image {
    width: 100%;
    height: var(--dx-card-image-height);
}

/* text section */

.card_section-text {
    grid-area: text;
    flex-grow: 1;
}

.dx-text-display-8 dx-button {
    margin-left: var(--dx-g-spacing-xs);
}

.dx-text-display-6 {
    position: relative;
    -webkit-line-clamp: var(--dx-c-heading-max-lines);
    -webkit-box-orient: vertical;
    display: box;
    overflow: hidden;
}

.dx-text-display-6 dx-icon {
    display: inline-block;
    transform: translateY(-3px);
}

/* mobile responsiveness */

@media screen and (max-width: 1024px) {
    .has-image:not(.show-mobile-image) .image {
        display: none;
    }
}