@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; } } } } } } } } } }