.card-section {
    --card-row-alignment: center;
    --card-alignment: flex-start;
    --card-column-count: 1;
    --card-gap: clamp(1rem, 4vw, 2rem);
    --card-media-aspect-ratio: 4/3;
    --card-padding: clamp(1rem, 3vw, 1.6rem);
    --card-section-heading-color: rgb(var(--color-foreground));
    --card-shadow: none;
    --card-shadow-hover: 0 4px 35px -5px rgba(0, 0, 0, .1)
}

.card-section__heading {
    color: var(--card-section-heading-color);
    flex: 1 100%;
    margin-bottom: .5em
}

.cards {
    --card-gap-clear: calc(var(--card-gap)*(var(--card-column-count) - 1));
    display: flex;
    flex-flow: row wrap;
    gap: var(--card-gap);
    justify-content: var(--card-row-alignment)
}

@media (min-width:650px) {
    .cards {
        --card-column-count: 2
    }
}

@media (min-width:990px) {
    .cards {
        --card-column-count: 3
    }
}

@media (min-width:1500px) {
    .cards {
        --card-column-count: 4
    }
}

.card {
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-basis: calc((100% - var(--card-gap-clear))/var(--card-column-count));
    flex-flow: column;
    position: relative;
    transition: all .2s
}

.card:hover {
    box-shadow: var(--card-shadow-hover)
}

.card:before {
    border-radius: var(--card-radius);
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .2s;
    width: 100%
}

.card:hover:before {
    opacity: 1
}

.js .cards[data-mh-animation] {
    will-change: auto !important
}

.js .cards[data-mh-animation] .card {
    opacity: 0
}

.cards.animated .card {
    animation: var(--card-animation) 1s cubic-bezier(.46, .52, .09, 1.01) forwards;
    animation-delay: calc(var(--card-animation-delay))
}

.card a:not(.button) {
    color: inherit
}

.card--has-link:hover {
    box-shadow: var(--card-shadow-hover);
    transition: all .2s ease
}

.card .bg,
.card .bg__img,
.card__image {
    border-radius: var(--card-radius)
}

.card__image {
    aspect-ratio: var(--card-media-aspect-ratio);
    display: block;
    object-fit: cover;
    transition: filter .2s, transform .2s
}

.card__image:not(.card__image--padded) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin: calc(var(--card-padding)*-1);
    margin-bottom: var(--card-padding);
    max-width: calc(100% + var(--card-padding)*2)
}

.card__link {
    color: inherit;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.card__link:focus,
.card__link:hover {
    opacity: 1
}

.card--has-link img {
    transition: transform .1s ease
}

.card--has-link:focus-within img,
.card--has-link:hover img {
    transform: scale(1.1) rotate(3deg);
    transition: transform .6s ease
}

.card__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: var(--card-alignment);
    padding: var(--card-padding);
    position: relative;
    width: 100%
}

.card__link:focus .card__content {
    box-shadow: 0 0 0 6px rgba(var(--rgb-secondary), 1);
    outline: none;
    transform: scale(.9)
}

.card__sub-title {
    display: block;
    font-size: .9em;
    opacity: .8
}

.card__title {
    display: block;
    line-height: 1;
    text-decoration: none
}

.card__title:not(.jumbo):not(.h1):not(.h2):not(.h3):not(.h4):not(.h5) {
    font-size: 1.5em;
    font-weight: inherit
}

.card__text {
    margin: 1em 0
}

.card__text p {
    line-height: inherit
}

.card__text p:first-child,
.card__text p:last-child {
    margin: 0
}

.card__icon {
    align-self: var(--card-icon-alignment);
    background: var(--card-icon-background);
    border-radius: var(--card-icon-border_radius);
    height: var(--card-icon-size);
    margin-bottom: 1em;
    object-fit: contain;
    padding: var(--card-icon-padding);
    transition: all .2s;
    width: var(--card-icon-size)
}

.card__ctas {
    align-items: center;
    display: flex;
    gap: 1rem
}

.text-center .card__ctas {
    margin-left: auto;
    margin-right: auto
}

.text-right .card__ctas {
    margin-left: auto
}