@layer addon {
    .templateMore {
        background-color: var(--color3);
        @media (min-width: 56em) {
            padding: calc(var(--padding) * 2) 0;
            .media {
                grid-column: span 2;
            }
            .inner {
                grid-column: span 10;
            }
        }
        @media (--min-fablet) {
            padding: calc(var(--padding) * 2) 0;
            .media {
                grid-column: span 2;
            }
            .inner {
                grid-column: span 10;
            }
        }
        .media {
            aspect-ratio: unset;
            border-radius: 0;
            display: flex;
            justify-content: center;
            .icon {
                width: fit-content;
                color: var(--color2);
                height: 100%;
            }
        }
        .inner {
            justify-content: center;
            gap: var(--padding)!important;
            .title {
                font-size: calc(var(--m-fontsize) + 0.625rem);
                font-weight: 400;
                @media (max-width: 56em) {
                    font-size: var(--l-fontsize);
                }
                @media (--max-fablet) {
                    font-size: var(--l-fontsize);
                }
            }
            .buttons {
                color: var(--color-light);
            }
        }
        @media (max-width: 56em) {
            padding: var(--padding) 0;
            text-align: center;
            .media {
                margin: 0 auto;
                .icon {
                    max-width: 128px;
                    width: 128px;
                }
            }
        }
        @media (--max-fablet) {
            padding: var(--padding) 0;
            text-align: center;
            .media {
                margin: 0 auto;
                .icon {
                    max-width: 128px;
                    width: 128px;
                }
            }
        }
    }
}