.algo-search {
    position: relative;
    isolation: isolate;
    z-index: 2;
}

.ais-SearchBox {
}

.ais-SearchBox .ais-SearchBox-form {
    display: block;
    position: relative;
    margin-block: 0;
    width: 100%;
}

.ais-SearchBox .ais-SearchBox-form .ais-SearchBox-input {
    padding-inline: 1rem 2.5rem;
    width: 100%;
    max-width: 100%;
    border-radius: 5px 7px 7px 5px;
}

.ais-SearchBox .ais-SearchBox-form .ais-SearchBox-submit {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.5rem;
    padding: 0.5em 0.75em 0.5em 0.5em;
    flex-shrink: 0;
    color: var(--color-link, inherit);
}

.ais-SearchBox .ais-SearchBox-form .ais-SearchBox-submitIcon {
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
}

.ais-SearchBox .ais-SearchBox-form .ais-SearchBox-reset {
    position: absolute;
    right: 3rem;
    top: 0;
    bottom: 0;
    margin: auto;
}

@media (min-width: 769px) {
    .ai-SearchBox {
        .ais-SearchBox-input {
            width: auto;
        }
    }
}


.algo-results {
    --color-bg: #000c;
    --color-copy: #ffffff;
    --color-text: #ffffff;
    --_top-padding: 6rem;
    display: none;
    z-index: -1;
    position: fixed;
    inset: 0;
    padding: var(--_top-padding) 6% 3rem;
    overflow: auto;
    overscroll-behavior: contain;
    background-color: var(--color-bg);
    color: var(--color-copy);
}

.algo-results[data-active] {
    display: block;
}

.algo-results::after {
    content: '';
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--_top-padding);
    background-image: linear-gradient(black calc(var(--_top-padding) - 2.5rem), transparent);
}

.algo-results .algo-noresults {
    grid-column: 1/-1;
    text-align: center;
}

.ais-Hits {

}

.ais-Hits-list {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(30ch, 100%), 1fr));
    padding-block: 0.5rem;
}

.ais-Hits-item {
    container: search-result / inline-size;
}

@media (min-width: 769px) {
    .algo-results {
        --_top-padding: 8rem;
    }
}

.card--search {
    position: relative;
    height: 100%;
    border-radius: 0.25rem;
    background-color: var(--color-bg);
    padding: 1.5rem min(7%, 1.25rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transition: transform 400ms ease, filter 200ms ease;
}

.card--search .card-link {
    position: absolute;
    inset: 0;
    color: transparent;
}

.card--search .card-thumb {
    flex-shrink: 0;
}

.card--search .card-content {
    align-self: center;
}

.card--search .card-content >* {
    margin: 0;
    display: block;
}

.card--search .card-content >*+* {
    margin-top: 0.35em;
}

.card--search .card-title {}

.card--search:active {
    transform: translateY(0.1rem);
    filter: brightness(0.96);
    transition-duration: 100ms;
}

@media (hover: hover) {
    .card--search:hover {
        transform: translateY(-0.25rem);
    }
}