@layer master {
    .templateMedia {
        .container {
            align-items: center;

            .media {
                height: fit-content;
                img {
                    height: auto;
                }
            }
        }
        &.mediaLeft {
            @media (min-width: 56em) {
                .media {
                    grid-column: span 4;
                }
                .inner {
                    grid-column: 6 / span 7;
                    align-self: center;
                }
            }
            @media (--min-fablet) {
                .media {
                    grid-column: span 4;
                }
                .inner {
                    grid-column: 6 / span 7;
                    align-self: center;
                }
            }
        }
        &.mediaRight {
            @media (min-width: 56em) {
                .media {
                    grid-column: 9 / span 4;
                    order: 2;
                }
                .inner {
                    grid-column: span 7;
                    order: 1;
                }
                
            }
            @media (--min-fablet) {
                .media {
                    grid-column: 9 / span 4;
                    order: 2;
                }
                .inner {
                    grid-column: span 7;
                    order: 1;
                }
                
            }
        }
        &.mediaBottom {
            @media (min-width: 56em) {
                .inner {
                    grid-column: 3 / span 8;
                }
                .media {
                    grid-column: 3 / span 8;
                }                
            }
            @media (--min-fablet) {
                .inner {
                    grid-column: 3 / span 8;
                }
                .media {
                    grid-column: 3 / span 8;
                }                
            }
        }

        video.teaser + video.full { display:none }

        &.playing {
            video.teaser { display: none; }
            video.teaser + video.full { display: block; }
        }
    }
}