/* The definition asset collector emits this once, only for placed Feature Cards. */
.blocksFeatureCard {
    display: block;
    min-width: 0;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
}
.blocksFeatureCardStage {
    overflow: hidden;
    border-radius: inherit;
    isolation: isolate;
}
.blocksFeatureCardImage { min-width: 0; width: 100%; }
.blocksFeatureCardImage .blocksImageFrame { height: 100%; }
.blocksFeatureCardImage img { display: block; width: 100%; height: auto; }
.blocksFeatureCardSurface {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    overflow-wrap: anywhere;
    /* The content participates in layout even when translated out of view. */
    z-index: 1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.blocksFeatureCard:focus { outline: 3px solid currentColor; outline-offset: 4px; }
.blocksFeatureCard:focus:not(:focus-visible) { outline: none; }
.blocksFeatureCard:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.blocksFeatureCardArrow { display: inline-block; text-decoration: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    a.blocksFeatureCard[data-feature-card-image="1"] .blocksFeatureCardStage { display: grid; }
    a.blocksFeatureCard[data-feature-card-image="1"] .blocksFeatureCardImage,
    a.blocksFeatureCard[data-feature-card-image="1"] .blocksFeatureCardSurface { grid-area: 1 / 1; }
    a.blocksFeatureCard[data-feature-card-image="1"] .blocksFeatureCardSurface {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        transform: translateY(100%);
        transition: transform .6s cubic-bezier(0.19, 1, 0.22, 1);
    }
    a.blocksFeatureCard:hover .blocksFeatureCardSurface,
    a.blocksFeatureCard:focus-within .blocksFeatureCardSurface,
    a.blocksFeatureCard[data-feature-card-canvas="1"] .blocksFeatureCardSurface { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .blocksFeatureCard .blocksFeatureCardSurface { transition: none; }
}
@media (forced-colors: active) {
    .blocksFeatureCard { border: 1px solid CanvasText; }
    .blocksFeatureCard .blocksFeatureCardSurface { background: Canvas; color: CanvasText; }
}