@media screen and (min-width: 640px) {
    .f-image-card {
        max-height: 100%
    }
}

.f-image-card__img {
    overflow: hidden
}

.f-image-card .f-button {
    pointer-events: auto
}

.f-image-card .f-button svg {
    width: 14px;
    height: 14px
}

.f-image-card__content {
    display: flex;
    z-index: 10;
    padding: 40px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none
}

@media screen and (max-width: 767px) {
    .f-image-card__content {
        padding: 20px
    }

    .f-image-card__content .f-richtext__title + .f-richtext__button {
        margin-top: 10px
    }
}

.f-image-card__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%
}

@media screen and (min-width: 640px) {
    .f-image-card__inner {
        overflow: hidden
    }
}

@media screen and (max-width: 767px) {
    .f-image-card--content-stack .f-image-card__content {
        position: static !important;
        padding: 20px 0 0;
        pointer-events: auto;
        align-items: flex-start !important
    }

    .f-image-card--content-stack .f-richtext__title {
        color: rgb(var(--color-heading))
    }

    .f-image-card--content-stack .f-richtext__subtitle {
        color: rgb(var(--color-foreground))
    }

    .f-image-card--content-stack:not(.color-scheme-inherit) .f-image-card__content {
        padding: 20px 12px
    }
}

.f-image-card--button-fixed .f-button--fixed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 0;
    border-color: currentColor;
    border-width: 1px 0 0 0 !important;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none !important;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0
}

.f-image-card--button-fixed .f-button--fixed:hover {
    color: inherit
}

.f-image-card--button-fixed .f-button--fixed svg {
    transform: scale(1) !important
}

@media screen and (max-width: 639px) {
    .f-image-card--button-fixed .f-button--fixed {
        left: 20px;
        right: 20px
    }
}

.f-image-card--button-fixed .f-button:not(.f-button--fixed) {
    display: none
}

.f-image-card:not(.f-image-card--content-stack) .f-image-card__content.m\:items-end {
    padding-bottom: 60px
}

@media screen and (max-width: 767px) {
    .f-image-card.f-image-card--content-stack .f-button--fixed {
        display: none
    }

    .f-image-card.f-image-card--content-stack .f-button:not(.f-button--fixed) {
        display: inline-flex
    }
}

@media screen and (max-width: 767px) {
    .f-mixed-layout--mobile-scroll .f-image-card {
        width: auto;
        --image-height: 70vw
    }

    .f-mixed-layout--mobile-scroll .f-image-card__img {
        height: var(--image-height)
    }

    .f-mixed-layout--mobile-scroll .f-image-card__content {
        width: calc(var(--image-ratio) * var(--image-height));
        align-items: flex-end;
        flex: 1
    }

    .f-mixed-layout--mobile-scroll .f-image-card__content .f-image-card__heading {
        flex: 1
    }
}
