.card {
    background-color: var(--color-white);
    border: solid 2px var(--color-alloy);
    display: inline-flex;
    box-shadow: var(--elevation-none);
    transition: all .5s var(--transition-bounce);
    border-radius: var(--roundness-lg);
    text-decoration: none !important;
    cursor: pointer;
}

.card.float {
    box-shadow: var(--elevation-md);
}

.card, .card.feature-box {
    padding: var(--space-sm);
    width: 100%;
    flex-grow: 1;
}

.card:hover {
    box-shadow: var(--elevation-lg);
    border-color: var(--color-water);
    transform: translateY(-4px);
}

.card > *,
.card > .feature-box,
.card > .highlight-box,
.card > .highlight-box:not(.horizontal) {
    padding: 0;
}

.dark-section .card {
    background-color: var(--color-charcoal);
    border-color: var(--color-charcoal-lighter);
    box-shadow: var(--elevation-dark-md);
}

.dark-section .card:hover {
    box-shadow: var(--elevation-dark-lg);
    border-color: var(--color-water-darker);
}

.card > .flex-container > [class*="col-flex-"] {
    padding: 0;
}

.card .feature-box:not(.horizontal) .link-with-arrow {
    margin-top: var(--text-margin-md);
}

.card .link-with-arrow span {
    text-decoration: none;
}

.card.horizontal .link-with-arrow {
    justify-content: flex-end;
}

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

.card-wrapper > * {
    width: 100%;
}

.card:not(.horizontal) .card-link {
    margin-top: var(--space-sm);
}

.card-section:not(.section-layout) .card-wrapper + .card-wrapper {
    margin-top: var(--space-sm);
}

.has-additional-links .links-section {
    display: flex;
    padding: var(--text-margin-sm) 0;
}

.has-additional-links .links-section a {
    margin-left: var(--space-sm);
}

.has-additional-links .links-section a,
.has-additional-links .links-section a:hover {
    text-decoration: none !important;
}

.elevation-none {
    box-shadow: var(--elevation-none);
}

.elevation-sm {
    box-shadow: var(--elevation-sm);
}

.elevation-md {
    box-shadow: var(--elevation-md);
}

.elevation-lg {
    box-shadow: var(--elevation-lg);
}

.elevation-xl {
    box-shadow: var(--elevation-xl);
}

.elevation-dark-sm {
    box-shadow: var(--elevation-dark-sm);
}

.elevation-dark-md {
    box-shadow: var(--elevation-dark-md);
}

.elevation-dark-lg {
    box-shadow: var(--elevation-dark-lg);
}

.elevation-dark-xl {
    box-shadow: var(--elevation-dark-xl);
}


@media screen and (max-width: 750px) {
    .card.horizontal {
        flex-direction: column;
    }

    .card.horizontal .feature-box-image {
        margin-right: 0;
    }
}