@layer components {
    .hero-block{
        --color-text: var(--color-white);
		--color-link: var(--color-white);
		--color-link-hover: var(--color-white);
		--color-link-active: var(--color-white);
		--color-link-visited: var(--color-white);

        background-image: var(--background-image-url);
        background-size: cover;
        background-position: var(--focal-x, 50%) var(--focal-y, 50%);
        position: relative;
        height: var(--content-height);
        max-height: 90vh;
        display: flex;
        align-items: flex-end;
        justify-content: center;

        @container (max-width: 768px) {
            height: calc(var(--spacer) * 42);
        }

        .hero-content{
            width: 1009px;
            max-width: 100%;
        }

        .gradient-wrap{
            width: 100%;
            flex: 0 0 100%;
            padding-block: calc(var(--spacer) * 8) calc(var(--spacer));
            background-image: linear-gradient(0deg, rgba(var(--color-dk-blue), 1) 40%, rgba(var(--color-dk-blue), 0) 100%);

            @container (max-width: 768px) {
                padding-bottom: var(--spacer);
            }
        }
    }
}