@layer addon {

    .templateMedia {
        .media {
            border-radius: 500px 500px 0px 500px;
            aspect-ratio: 1;
            img {
                height: 100%;
            }
        }
        .inner {
            align-items: flex-start;
            .intro {
                text-align: left;
            }
        }
        &.mediaRight {
            @media (min-width: 56em) {
                .media {
                    grid-column: 7 / span 5;
                }
                .inner {
                    grid-column: 2 / span 4;
                }
            }
            @media (--min-fablet) {
                .media {
                    grid-column: 7 / span 5;
                }
                .inner {
                    grid-column: 2 / span 4;
                }
            }
        }
    }
    
}