.templateHomepageIntro {
    margin-top: calc(var(--section) * -1.5);
    @media (max-width: 90em) {
        margin-top: calc(var(--section) * -0.5);
    }
    @media (--max-desktop) {
        margin-top: calc(var(--section) * -0.5);
    }
    
    .container {
        border-top-left-radius: var(--section-radius);
        border-top-right-radius: var(--section-radius);
        background: linear-gradient(var(--color4) 0%, var(--color4) 55%, var(--color-light) 55%, var(--color-light) 100%);
        row-gap: var(--section);
        @media (max-width: 56em) {
            background: linear-gradient(var(--color4) 0%, var(--color4) 65%, var(--color-light) 55%, var(--color-light) 100%);
            padding: var(--section) calc(var(--padding) - var(--gutter)) 0 calc(var(--padding) - var(--gutter));
        }
        @media (--max-fablet) {
            background: linear-gradient(var(--color4) 0%, var(--color4) 65%, var(--color-light) 55%, var(--color-light) 100%);
            padding: var(--section) calc(var(--padding) - var(--gutter)) 0 calc(var(--padding) - var(--gutter));
        }
        
        .media {
            grid-column: 2 / span 10;
            order: 2;
            border-radius: 0 0 var(--section-radius) var(--section-radius);
            @media (max-width: 56em) {
                margin: 0 var(--gutter);
                grid-column: 1 / span 10;
                height: 60vh;
            }
            @media (--max-fablet) {
                margin: 0 var(--gutter);
                grid-column: 1 / span 10;
                height: 60vh;
            }
            @media (min-width: 56em) {
                video {
                    height: 600px;
                }
            }
            @media (--min-fablet) {
                video {
                    height: 600px;
                }
            }
        } 
        .inner {
            order: 1;
            grid-column: 3 / span 8;
            @media (max-width: 56em) {
                grid-column: 2 / span 8;
            }
            @media (--max-fablet) {
                grid-column: 2 / span 8;
            }
            
            .title {
                font-size: var(--xl-fontsize);
                line-height: var(--xl-lineheight);
            }
        }
    }
}