/**
 * Feature Showcase Block Styles
 */

.block-feature-showcase {
    --feature-showcase-safe-space: 0.5em;
    --feature-showcase-details-edge: 11em;

    background: var(--color-1);
    color: var(--color-2);
    min-height: 100svh;
    padding: var(--feature-showcase-safe-space);
    overflow: hidden;
}

.block-feature-showcase__figure {
    width: 100%;
    height: calc(100svh - 1em);
    overflow: hidden;
    border-radius: 0.375em;
}

.block-feature-showcase__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.block-feature-showcase__content {
    min-height: 5.75em;
    padding: 1.75em calc(var(--feature-showcase-details-edge) - var(--feature-showcase-safe-space)) 6.25em 1em;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15.125em 16em;
    column-gap: 11em;
    align-items: start;
}

.block-feature-showcase__title {
    width: 100%;
    margin: 0;
}

.block-feature-showcase__details {
    width: 100%;
    justify-self: start;
}

.block-feature-showcase__secondary-text {
    margin-top: 0.5em;
    opacity: 0.5;
}

@media screen and (max-width: 1024px) {
    .block-feature-showcase {
        min-height: 0;
        padding: 0.15em;
    }

    .block-feature-showcase__figure {
        width: min(100%, 22.125em);
        height: 18.75em;
    }

    .block-feature-showcase__content {
        padding: 1.75em 1.5em 2em;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .block-feature-showcase__eyebrow {
        margin-bottom: 1.875em;
    }

    .block-feature-showcase__title {
        width: min(100%, 15.125em);
        align-self: flex-start;
        margin-bottom: 1.5em;
    }
}