@layer addon {
    .templateBlocks {
        .block {
            display: flex;
            flex-direction: row;
            height: 100%;
            color: var(--color-light);
            
            border-top-left-radius: var(--section-radius);
            border-top-right-radius: var(--section-radius);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            overflow: hidden;
            @media (max-width: 56em) {
                flex-direction: column;
            }
            @media (--max-fablet) {
                flex-direction: column;
            }
            .media {
                border-radius: 0;
                img, video {
                    height: 100%;
                }
                @media (min-width: 56em) {
                    min-width: 300px;
                    max-width: 300px;
                    min-height: 260px;
                }
                @media (--min-fablet) {
                    min-width: 300px;
                    max-width: 300px;
                    min-height: 260px;
                }
            }
            .inner {
                padding: var(--padding);
                background-color: var(--color1);
                flex-grow: 1;
                .intro {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: var(--gutter);
                    .title + .subTitle {
                        margin-top: 0;
                    }
                    .title {
                        order: 2;
                        font-size: var(--m-fontsize);
                        font-weight: bold;
                        color: var(--color-light);
                    }
                    .subTitle {
                        order: 1;
                        font-weight: bold;
                        font-size: var(--xl-fontsize);
                        color: var(--color3);
                    }
                }
            }
        }
    }
}