@layer addon {
    .templateMedia {
        .container {
            .intro {
                .title {
                    font-size: var(--l-fontsize);
                    line-height: var(--l-lineheight);
                    text-indent: 0;
                    padding-left: 0;
                }
            }
        }
        &.mediaBottom {
            .media {
                @media (max-width: 56em) {
                    grid-column: auto;
                }
                @media (--max-fablet) {
                    grid-column: auto;
                }
            }
        }
        &.mediaRight,
        &.mediaLeft {
            .media {
                @media (max-width: 56em) {
                    grid-column: auto;
                }
                @media (--max-fablet) {
                    grid-column: auto;
                }
            }
            .media, img {
                height: 100%;
            }
            .inner {
                padding: calc(var(--section) / 2) 0;
                @media (max-width: 56em) {
                    padding: 0;
                }
                @media (--max-fablet) {
                    padding: 0;
                }
            }
        }
        &.mediaLeft {
            @media (min-width: 56em) {
                .media {
                    grid-column: span 6;
                }
                .inner {
                    grid-column: 7 / span 6;
                    align-self: center;
                }
            }
            @media (--min-fablet) {
                .media {
                    grid-column: span 6;
                }
                .inner {
                    grid-column: 7 / span 6;
                    align-self: center;
                }
            }
        }
        &.mediaRight {
            @media (min-width: 56em) {
                .media {
                    grid-column: 7 / span 6;
                }
                .inner {
                    grid-column: span 6;
                }
                
            }
            @media (--min-fablet) {
                .media {
                    grid-column: 7 / span 6;
                }
                .inner {
                    grid-column: span 6;
                }
                
            }
        }
    }
}