@layer addon {

    .templateMedia {

        &.mediaLeft {
            .buttons {
                display: flex;
                flex-direction: column;
                gap: var(--padding);
                .tags {
                    color: var(--color-light);
                    .icon {
                        width: 32px;
                        height: 32px;
                        @media (max-width: 56em) {
                            width: 24px;
                            height: 24px;
                        }
                        @media (--max-fablet) {
                            width: 24px;
                            height: 24px;
                        }
                    }
                    .text {
                        font-size: var(--fontsize);
                        font-weight: 500;
                    }
                }
            }

            @media (min-width: 56em) {    
                .inner {
                    grid-column: 5 / span 5;
                    padding-right: var(--padding);
                }
                .buttons {
                    grid-column: 10 / span 3;
                    padding-left: calc(var(--padding) * 2);
                    height: 100%;
                    justify-content: center;
                    border-left: 2px solid white;
                }
            }

            @media (--min-fablet) {    
                .inner {
                    grid-column: 5 / span 5;
                    padding-right: var(--padding);
                }
                .buttons {
                    grid-column: 10 / span 3;
                    padding-left: calc(var(--padding) * 2);
                    height: 100%;
                    justify-content: center;
                    border-left: 2px solid white;
                }
            }
            @media (max-width: 56em) {
                .inner, .buttons {
                    grid-column: span 12;
                }
                .inner {
                    padding-bottom: calc(var(--padding) / 4);
                    text-align: left;
                }
                .buttons {
                    padding-top: var(--padding);
                    border-top: 2px solid white;
                }
            }
            @media (--max-fablet) {
                .inner, .buttons {
                    grid-column: span 12;
                }
                .inner {
                    padding-bottom: calc(var(--padding) / 4);
                    text-align: left;
                }
                .buttons {
                    padding-top: var(--padding);
                    border-top: 2px solid white;
                }
            }
        }
    }

    .templateContent {
        .inner {
            text-align: left !important;
            align-items: flex-start !important;
            @media (min-width: 56em) {
                grid-column: 4 / span 6;
            }
            @media (--min-fablet) {
                grid-column: 4 / span 6;
            }
            .content {
                font-size: var(--fontsize) !important;
                line-height: var(--lineheight) !important;
                margin-top: var(--padding) !important;
            }
        }
    }
}