/*
    Block: Resource Cards
    Note: Selectors must start with .block-resource-cards
*/

@layer blocks {
    .block-resource-cards .main-wrapper {
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 1.25rem;
    }

    .block-resource-cards .cta-card {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        padding: 1.875rem;
        overflow: hidden;
        aspect-ratio: 2.1;
    }

    .block-resource-cards .cta-card__link {
        text-decoration: none;
        margin-top: auto;
        max-width: 70%;
    }

    .block-resource-cards .plus-circle-btn {
        position: absolute;
        bottom: 1.875rem;
        right: 1.75rem;
    }

    .block-resource-cards .cta-card .media-wrapper::after {
        content: '';
        position: absolute;
        inset: 0;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, rgba(0, 0, 0, 0)), to(#000000));
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, #000000 100%);
    }

    @media screen and (width > 920px) {
        .block-resource-cards .cta-card {
            --transition-dur: 180ms;
            --transition-func: ease-in-out;
        }

        .block-resource-cards .cta-card .media-wrapper {
            -webkit-transition: -webkit-transform var(--transition-dur) var(--transition-func);
            transition: -webkit-transform var(--transition-dur) var(--transition-func);
            transition: transform var(--transition-dur) var(--transition-func);
            transition: transform var(--transition-dur) var(--transition-func), -webkit-transform var(--transition-dur) var(--transition-func);
        }

        .block-resource-cards .cta-card .media-wrapper::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 0;
            background:
                -webkit-gradient(linear, left top, left bottom, color-stop(30%, rgba(0, 0, 0, 0)), to(#000000)),
                -webkit-gradient(linear, left bottom, left top, from(rgba(37, 50, 69, 0.2)), to(rgba(37, 50, 69, 0.2))),
                -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
            background:
                linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, #000000 100%),
                linear-gradient(0deg, rgba(37, 50, 69, 0.2), rgba(37, 50, 69, 0.2)),
                linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
            -webkit-transition: opacity var(--transition-dur) var(--transition-func);
            transition: opacity var(--transition-dur) var(--transition-func);
            -webkit-transition-delay: calc(var(--transition-dur) / 4);
                    transition-delay: calc(var(--transition-dur) / 4);
        }

        .block-resource-cards .cta-card .media-wrapper::after {
            -webkit-transition: opacity var(--transition-dur) var(--transition-func);
            transition: opacity var(--transition-dur) var(--transition-func);
        }

        .block-resource-cards .plus-circle-btn .icon {
            -webkit-transition: var(--transition-dur) var(--transition-func);
            transition: var(--transition-dur) var(--transition-func);
            -webkit-transition-property: color, -webkit-transform;
            transition-property: color, -webkit-transform;
            transition-property: color, transform;
            transition-property: color, transform, -webkit-transform;
        }

        .block-resource-cards .cta-card:is(:hover, :focus-within) .media-wrapper::before {
            opacity: 1;
            -webkit-transition-delay: 0ms;
                    transition-delay: 0ms;
        }

        .block-resource-cards .cta-card:is(:hover, :focus-within) .media-wrapper::after {
            opacity: 0;
            -webkit-transition-delay: calc(var(--transition-dur) / 4);
                    transition-delay: calc(var(--transition-dur) / 4);
        }

        .block-resource-cards .cta-card:is(:hover, :focus-within) .plus-circle-btn .icon {
            color: var(--c-orange);
            -webkit-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                    transform: rotate(90deg);
        }

        .block-resource-cards .cta-card:is(:hover, :focus-within) .media-wrapper {
            -webkit-transform: scale(1.05);
                -ms-transform: scale(1.05);
                    transform: scale(1.05);
        }
    }

    @media screen and (width <= 920px) {
        .block-resource-cards .plus-circle-btn {
            --size: 2.125rem;
            bottom: 1.25rem;
            right: 1.25rem;
        }
        .block-resource-cards .cta-card {
            padding: 1.25rem;
        }
        .block-resource-cards .cta-card__link {
            margin-right: 2.75rem;
        }
    }

    @media screen and (width <= 768px) {
        .block-resource-cards .main-wrapper {
            grid-template-columns: 1fr;
            gap: 0.9375rem;
        }
        .block-resource-cards .cta-card {
            aspect-ratio: 1.63;
        }
    }
}