article > section.hero {
    position: relative;
    overflow: hidden;

    > .wrapper {
        --textContentProportion: 1;

        display: flex;
        justify-content: stretch;
        align-items: center;
        gap: var(--base-gap);

        box-sizing: border-box;

        > div {
            &.text {
                flex-basis: calc(50% * var(--textContentProportion));

                display: flex;
                flex-direction: column;
                gap: var(--gap-big);

                @media all and (min-width: 600px) {
                    padding: var(--gap-bigger) var(--gap-bigger);
                }

                > .title {
                    font-family: var(--font-family-title);
                    font-size: 30pt;
                    font-weight: 600;
                    line-height: .95em;
                    letter-spacing: -1px;
                    text-wrap: pretty;
                    color: var(--fgColor);
                }

                h1 {
                    font-family: var(--font-family-title);
                    font-size: 20pt;
                    font-weight: 600;
                    line-height: 1.1em;
                }

                > h1.title {
                    font-size: 50pt;
                    letter-spacing: -2px;

                    @media all and (max-width: 600px) {
                        font-size: 30pt;
                    }

                    text-shadow:
                        0 0 20px #fff,
                        0 0 20px #fff,
                        0 0 20px #fff,
                        0 0 20px #fff;
                }

                > .subTitle {
                    font-weight: normal;
                    font-size: var(--font-size-big);
                    line-height: var(--font-line-height);
                    color: var(--fgColor);
                    text-wrap: balance;

                    text-shadow:
                        0 0 20px #fff,
                        0 0 20px #fff,
                        0 0 20px #fff,
                        0 0 20px #fff;
                }

            }

            &.content {
                position: relative;
                flex-basis: calc(50% * (1 - var(--textContentProportion)));

                --offset: 250px;

                &:first-child.offset {
                    flex-basis: calc((50% * var(--textContentProportion))  + var(--offset));
                    margin-right: calc(var(--offset) * -1);
                    transform: translateX(calc(var(--offset) * -1));

                    > * {

                        margin-left: auto;
                    }
                }

                &:last-child.offset {
                    flex-basis: calc((50% * var(--textContentProportion)) + var(--offset));
                    margin-left: calc(var(--offset) * -1);
                    transform: translateX(var(--offset));
                }

                > .IconMosaic.perspective {
                    margin-top: var(--base-gap);
                    margin-bottom: var(--base-gap);
                }
            }

            @media all and (max-width: 800px) {
                &.content {
                    --offset: 0;
                }
            }
        }

        @media all and (max-width: 800px) {
            flex-direction: column;
            align-items: stretch;
        }
    }

    &.taller {
        padding-top: var(--gap-bigger);
        padding-bottom: var(--gap-bigger);
    }
}