@layer addon {

    .templateStackedMedia {
        overflow: hidden;
        padding: 0 !important;
        height: 100vh;
        .container {
            grid-column: full-start / full-end;

            .irresistibleText {
                z-index: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: var(--gutter);
                font-family: var(--font-extra);
                font-weight: 300;
                font-size: 10vw;
                line-height: 0.8;
                pointer-events: none;
                grid-column: span 12;
                @media (max-width: 56em) {
                    gap: var(--section);
                }
                @media (--max-fablet) {
                    gap: var(--section);
                }
            }
            .stack {
                display: contents;
            }

            .media {
                position: absolute;
                inset: 0;
                margin: auto;
                width: 60vw;
                aspect-ratio: 3 / 2;
                will-change: transform, width, height, border-radius;
                @media (max-width: 56em) {
                    width: 90vw;
                    aspect-ratio: 1;
                }
                @media (--max-fablet) {
                    width: 90vw;
                    aspect-ratio: 1;
                }

                &::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    z-index: 1;
                    opacity: 0.3;
                    background: #000;
                    pointer-events: none;
                }

                &.stack-0 {
                    z-index: 3;
                    transform: rotate(-7deg);
                }
                &.stack-1 {
                    z-index: 2;
                    transform: translate(0%, 0%) rotate(0deg);
                }
                &.stack-2 {
                    z-index: 1;
                    transform: translate(2%, 2%) rotate(6deg);
                }
            }

            .inner {
                position: absolute;
                inset: 0;
                z-index: 4;
                margin: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: calc(var(--gutter) / 4);
                text-align: center;
                pointer-events: none;
                transform: rotate(-7deg); 
                width: 50%;
                @media (max-width: 56em) {
                    width: 90%;
                }
                @media (--max-fablet) {
                    width: 90%;
                }

                .title, .subTitle {
                    color: var(--color-light);
                }
            }
        }
    }
}