@layer addon {

    .templateContent {
        @media (min-width: 56em) {
            &:first-of-type:has(.media) {
                height: 100vh;
            }
        }
        @media (--min-fablet) {
            &:first-of-type:has(.media) {
                height: 100vh;
            }
        }

        &:not(.columns, .split) {
            .media {
                position: absolute;
                grid-column: unset;
                border-radius: 0;
                width: 325px;
                height: auto;
                @media (min-width: 56em) {
                    &:first-child {
                        left: var(--min-gutter);
                    }
                    min-width: 250px;
                    top: 50%;
                    transform: translateY(-50%);
                }
                @media (--min-fablet) {
                    &:first-child {
                        left: var(--min-gutter);
                    }
                    min-width: 250px;
                    top: 50%;
                    transform: translateY(-50%);
                }
                @media (max-width: 56em) {
                    width: 100%;
                    bottom: 0;
                    position: relative;
                    order: 2;
                    grid-column: span 6;
                    padding-top: var(--gutter);
                    img {
                        object-position: right center;
                        height: auto;
                    }
                }
                @media (--max-fablet) {
                    width: 100%;
                    bottom: 0;
                    position: relative;
                    order: 2;
                    grid-column: span 6;
                    padding-top: var(--gutter);
                    img {
                        object-position: right center;
                        height: auto;
                    }
                }
            }
            
            .media + .media {
                @media (min-width: 56em) {
                    right: var(--min-gutter);
                }
                @media (--min-fablet) {
                    right: var(--min-gutter);
                }
                @media (max-width: 56em) {
                    grid-column: 7 / span 6;
                    img {
                        object-position: left center;
                    }
                    margin: auto 0;
                }
                @media (--max-fablet) {
                    grid-column: 7 / span 6;
                    img {
                        object-position: left center;
                    }
                    margin: auto 0;
                }
            }

            .inner {
                text-align: center;
                align-items: center;
                justify-content: center;
                @media (max-width: 56em) {
                    justify-content: flex-start;
                }
                @media (--max-fablet) {
                    justify-content: flex-start;
                }
                @media (min-width: 56em) {
                    grid-column: 2 / span 10;
                    .subTitle, .content {
                        width: calc(100% / 12 * 8);
                        margin-left: auto;
                        margin-right: auto;
                    }
                }
                @media (--min-fablet) {
                    grid-column: 2 / span 10;
                    .subTitle, .content {
                        width: calc(100% / 12 * 8);
                        margin-left: auto;
                        margin-right: auto;
                    }
                }
            }

            .media + .inner {
                @media (min-width: 56em) {
                    grid-column: 3 / span 8;
                    .subTitle, .content {
                        width: 100%;
                    }
                }
                @media (--min-fablet) {
                    grid-column: 3 / span 8;
                    .subTitle, .content {
                        width: 100%;
                    }
                }
            }
        }
        &.columns {
            .inner {
                @media (min-width: 56em) {
                    grid-column: span 4;
                }
                @media (--min-fablet) {
                    grid-column: span 4;
                }
            }
        }
        &.split {
            .inner {
                justify-content: center;
            }
        }
    }
}