@layer addon {

    .templateBackground {
        padding: calc(var(--section) * 2) 0 calc(var(--section) / 2) 0;
        margin: 0 var(--spacer);
        border-radius: var(--border-radius);
        overflow: hidden;
        .container {
            .title, .subTitle, .content {
                color: var(--color-light);
            }
            .media {
                &:before {
                    opacity: 0.3;
                    background-color: #000;
                }
            }
            @media (min-width: 56em) {
                grid-column: full-start / full-end;
                .inner {
                    grid-column: 2 / span 10;

                    display: grid;
                    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
                    grid-template-areas:
                        ".          content"
                        "title      content"
                        "subtitle   buttons";

                    &:not(:has(.subTitle)), &:has(.subTitle:empty) {
                        grid-template-areas:
                            ".          content"
                            "title      content"
                            "title      buttons";
                        .title {
                            align-self: end;
                        }
                    }
                    .intro {
                        display: contents;
                        .title {
                            grid-area: title;
                        }
                        .subTitle {
                            grid-area: subtitle;
                            margin-top: 0;
                        }
                        .content {
                            grid-area: content;
                            align-self: end;
                            margin-top: 0;
                        }
                    }
                    .buttons {
                        grid-area: buttons;
                    }
                }
            }
            @media (--min-fablet) {
                grid-column: full-start / full-end;
                .inner {
                    grid-column: 2 / span 10;

                    display: grid;
                    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
                    grid-template-areas:
                        ".          content"
                        "title      content"
                        "subtitle   buttons";

                    &:not(:has(.subTitle)), &:has(.subTitle:empty) {
                        grid-template-areas:
                            ".          content"
                            "title      content"
                            "title      buttons";
                        .title {
                            align-self: end;
                        }
                    }
                    .intro {
                        display: contents;
                        .title {
                            grid-area: title;
                        }
                        .subTitle {
                            grid-area: subtitle;
                            margin-top: 0;
                        }
                        .content {
                            grid-area: content;
                            align-self: end;
                            margin-top: 0;
                        }
                    }
                    .buttons {
                        grid-area: buttons;
                    }
                }
            }
        }
    }
}