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

    > .wrapper {
        padding: var(--gap-bigger);
        box-sizing: border-box;

        > .content {

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

            margin-left: auto;
            margin-right: auto;

            max-width: 60%;

            @media all and (max-width: 700px) {
                max-width: 100%;
            }

            text-align: center;

            > .title {
                position: relative;

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

                display: inline-block !important;

                z-index: 1;

                &:before {
                    position: absolute;
                    content: '';
                    inset: -20px;
                    background: var(--color-background);

                    border-radius: 30px;
                    filter: blur(20px);

                    z-index: -1;
                }
            }

            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;
                }
            }

            > .subTitle {
                position: relative;

                font-weight: var(--font-weight);
                font-size: var(--font-size-big);
                line-height: 1.2em;
                color: var(--fgColor);
                text-wrap: balance;

                z-index: 1;

                &:before {
                    position: absolute;
                    content: '';
                    inset: -20px;
                    background: var(--color-background);

                    border-radius: 30px;
                    filter: blur(20px);

                    z-index: -1;
                }

                @media all and (max-width: 600px) {
                    max-width: 100%;
                }
            }
        }

    }

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