@layer addon {
    .templateMedia {
        .media {
            height: 100%;
            img {
                height: 100%;
            }
            &:has(.playing) {
                &:before {display: none;}
            }
        }
        @media (min-width: 56em) {
            .inner {
                padding: calc(var(--section) / 2) 0;
            }
        }
        @media (--min-fablet) {
            .inner {
                padding: calc(var(--section) / 2) 0;
            }
        }
        @media (max-width: 56em) {
            .container {
                row-gap: var(--section);
            }
        }
        @media (--max-fablet) {
            .container {
                row-gap: var(--section);
            }
        }
        &.mediaLeft {
            @media (min-width: 56em) {
                .media {
                    grid-column: span 5;
                }
                .inner {
                    grid-column: 7 / span 6;
                }
                
                &.portrait {
                    .media {
                        grid-column: 2 / span 3;
                    }
                }   
            }
            @media (--min-fablet) {
                .media {
                    grid-column: span 5;
                }
                .inner {
                    grid-column: 7 / span 6;
                }
                
                &.portrait {
                    .media {
                        grid-column: 2 / span 3;
                    }
                }   
            }
        }
        &.mediaRight {
            @media (min-width: 56em) {
                .media {
                    grid-column: 8 / span 5;
                }
                .inner {
                    grid-column: span 6;
                }
                
                &.portrait {
                    .media {
                        grid-column: 9 / span 3;
                    }
                }                
            }
            @media (--min-fablet) {
                .media {
                    grid-column: 8 / span 5;
                }
                .inner {
                    grid-column: span 6;
                }
                
                &.portrait {
                    .media {
                        grid-column: 9 / span 3;
                    }
                }                
            }
        }
        &.video {
            .media {
                height: auto;
            }
        }
        &.portrait {
            .media {
                aspect-ratio: 9 / 16;
                video, img {
                    height: 100%;
                    aspect-ratio: 9 / 16;
                }
            }
        }

    }
}