@layer addon {

    .templateFilter {
        @media (min-width: 56em) {
            .filters {
                grid-column: span 4;
                margin-right: calc(var(--section) / 2);
            }
            .filterGrid {
                grid-column: span 8;
                
            }
            .item {
                grid-column: span 12;
            }

        }
        @media (--min-fablet) {
            .filters {
                grid-column: span 4;
                margin-right: calc(var(--section) / 2);
            }
            .filterGrid {
                grid-column: span 8;
                
            }
            .item {
                grid-column: span 12;
            }

        }
    }
}