/*
    Block: Full Bleed Text Content
    Note: Selectors must start with .block-full-bleed-text-content
*/

@layer blocks {
    .block-full-bleed-text-content .main-wrapper {
        aspect-ratio: 1.81;
    }

    .block-full-bleed-text-content .media-wrapper::after{
        content: '';
        position: absolute;
        inset: 0;
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.3))),-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), color-stop(60%, rgba(0, 0, 0, 0))),-webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5)));
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%),linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);
        opacity: 1;
    }

    .block-full-bleed-text-content .main-wrapper .overlay {
        height: 100%;
        color: var(--c-lighter-grey);
    }

    .block-full-bleed-text-content .primary-wrapper {
        margin: 3.75rem auto auto 2.5rem;
        max-width: 45.6875rem;
    }

    .block-full-bleed-text-content .primary-wrapper .text-content {
        text-wrap: balance;
    }

    .block-full-bleed-text-content .primary-wrapper .text-content p {
        max-width: 76%;
    }

    .block-full-bleed-text-content .secondary-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 2.5rem;
        -ms-flex-item-align: start;
            align-self: flex-start;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        margin: auto 6.6875rem 5rem auto;
        max-width: 23.875rem;
    }

    @media screen and (width <= 1200px) {
        .block-full-bleed-text-content .secondary-wrapper {
            margin: auto 3.75rem 2.5rem auto;
        }
    }

    @media screen and (width <= 1050px) {
        .block-full-bleed-text-content .main-wrapper {
            aspect-ratio: auto;
        }
        .block-full-bleed-text-content .main-wrapper .overlay {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: 2.5rem;
        }
        .block-full-bleed-text-content .secondary-wrapper {
            margin: 0 1.5rem 1.875rem 1.5rem;
            gap: 1.5rem;
        }
        .block-full-bleed-text-content .primary-wrapper {
            margin: 2.1875rem 1.5rem 0;
        }
        .block-full-bleed-text-content .primary-wrapper .text-content > * {
            margin-block: 0 var(--gap);
            --gap: 1.375rem;
        }

        .block-full-bleed-text-content .primary-wrapper .text-content,
        .block-full-bleed-text-content .secondary-wrapper .text-content {
            text-wrap: unset;
        }

        .block-full-bleed-text-content .secondary-wrapper .text-content {
            max-width: 85%;
        }
    }

    @media screen and (width <= 620px) {
        .block-full-bleed-text-content .main-wrapper {
            aspect-ratio: auto;
        }
        .block-full-bleed-text-content .primary-wrapper .text-content p,
        .block-full-bleed-text-content .secondary-wrapper,
        .block-full-bleed-text-content .primary-wrapper {
            max-width: 100%;
        }
        .block-full-bleed-text-content .main-wrapper .overlay {
            gap: 4rem;
        }
    }
}