@layer addon {

    .templateCollection.collectionCase {
        overflow: hidden;
        padding-top: var(--section);
        .inner {
            align-items: center;
            gap: calc(var(--gutter) * 2);
            .intro {
                @media (min-width: 56em) {
                    width: calc(100% / 12 * 8);
                }
                @media (--min-fablet) {
                    width: calc(100% / 12 * 8);
                }
                text-align: center;
            }
            .intro + .irresistibleText {
                top: calc(var(--section) * 1.75);
            }
        }
        .irresistibleText {
            font-size: 17rem;
            line-height: .7;
            font-family: var(--font-sub);
            font-weight: 700;
            text-transform: uppercase;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: calc(var(--gutter) / 2);
            color: rgba(var(--color1rgb), 0.1);
            position: absolute;
            top: var(--gutter);
            left: 0;
            width: 100%;
            @media (max-width: 56em) {
                font-size: 8rem;
            }
            @media (--max-fablet) {
                font-size: 8rem;
            }
            abbr {
                display: inline-block;
                white-space: nowrap;
                will-change: transform;
                text-transform: lowercase;
            }
        }
        .splide {
            .splide__track {
                overflow: visible;
            }
            @media (min-width: 120em) {
                grid-column: 2 / span 10;
                .splide__track {
                    .splide__list {
                        justify-content: space-between;
                    }
                }
            }
            @media (--min-largescreen) {
                grid-column: 2 / span 10;
                .splide__track {
                    .splide__list {
                        justify-content: space-between;
                    }
                }
            }
            @media (min-width: 56em) {
                .splide__track {
                    .splide__list {
                        display: flex;
                        justify-content: center;
                        flex-wrap: wrap;
                        gap: calc(var(--section) / 2);
                    }
                }
            }
            @media (--min-fablet) {
                .splide__track {
                    .splide__list {
                        display: flex;
                        justify-content: center;
                        flex-wrap: wrap;
                        gap: calc(var(--section) / 2);
                    }
                }
            }
        }
    }


    .filterCaseIrresistible {
        position: relative;
        overflow: hidden;

        .irresistibleText {
            font-size: 17rem;
            line-height: .7;
            font-family: var(--font-sub);
            font-weight: 700;
            text-transform: uppercase;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: calc(var(--gutter) / 2);
            color: rgba(var(--color1rgb), 0.1);
            position: absolute;
            top: var(--gutter);
            left: 0;
            width: 100%;
            z-index: 1;
            pointer-events: none;
            @media (max-width: 56em) {
                font-size: 8rem;
            }
            @media (--max-fablet) {
                font-size: 8rem;
            }
            abbr {
                display: inline-block;
                white-space: nowrap;
                will-change: transform;
                text-transform: lowercase;
            }
        }
    }

    .templateFilter.filterCase {
        .filterGrid {
            grid-column: span 12;
            .grid {
                gap: calc(var(--section) / 2);
                z-index: 9;
                .item {
                    @media (min-width: 56em) {
                        grid-column: span 5;
                        &:nth-child(even) {
                            grid-column: 2 / span 5;
                        }
                    }
                    @media (--min-fablet) {
                        grid-column: span 5;
                        &:nth-child(even) {
                            grid-column: 2 / span 5;
                        }
                    }
                }
            }
        }
    }
}