@layer addon {
    .search {
        .templateContent {
            .container {
                .no-results {
                    grid-column: span 12;
                }
                .results {
                    grid-column: span 12;
                    display: flex;
                    flex-direction: column;

                    .result {
                        padding-bottom: calc(var(--padding) * 2);

                        .title {
                            font-size: var(--m-fontsize);
                            padding-bottom: calc(var(--gutter) / 2);
                        }
                        .content {
                            display: grid;
                            gap: var(--gutter);
                            grid-template-columns: repeat(12, 1fr);
                            width: 100%;
                        }
                        .buttons {
                            margin-top: var(--gutter);
                        }
                        &.collectionPage {
                            .content {
                                gap: 0;
                                .item {
                                    grid-column: span 12;
                                    a {
                                        padding: 8px calc(var(--gutter) / 2);
                                        display: block;
                                        width: 100%;
                                        border-bottom: 1px solid var(--form-accent-color);
                                        text-decoration: none;
                                        &:hover {
                                            @media (hover: hover) {
                                                background: var(--form-accent-color);
                                            }
                                        }

                                    }
                                }
                            }
                        }
                        &.collectionJobPosting,
                        &.collectionPerson, 
                        &.collectionArticle {
                            .content {
                                .item {
                                    grid-column: span 6;
                                    @media (max-width: 56em) {
                                        grid-column: span 12;
                                    }
                                    @media (--max-fablet) {
                                        grid-column: span 12;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            
        }
    }
}