.api-search-engine-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-bottom: 2rem;

    @media screen and (min-width: 1440px) {
        grid-template-columns: 35rem 1fr;
        gap: 2.5rem;
    }
}

#api-search-engine-root {
    transition: opacity 0.2s;
}

#api-search-engine-root.is-loading {
    opacity: 0.4;
    pointer-events: none;
}

#api-search-engine-spinner {
    display: none;
    width: 3rem;
    height: 3rem;
    margin: 1rem auto;
    border: 2px solid #e5e5e5;
    border-top-color: #222;
    border-radius: 50%;
    animation: api-search-engine-spin 0.6s linear infinite;
}

#api-search-engine-spinner.is-visible {
    display: block;
}

@keyframes api-search-engine-spin {
    to { transform: rotate(360deg); }
}