.projects > .search-container {
    padding-bottom: 1em;
}

.projects > .search-container > .search-bar {
    display: flex;
    justify-content: center;

    color: var(--fg);
    background-color: var(--bg-dim);
    padding-right: 1rem;

    border-radius: 1rem;
    transition: all 300ms ease;
}

.projects > .search-container > .search-bar > input::placeholder  {
    color: var(--grey);
}

.projects > .search-container > .search-bar > input  {
    color: var(--fg);
    background-color: transparent;

    flex: 1;
    border: none;
    padding: 1rem;
    font-size: 1.2em;

    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.projects > .search-container > .search-bar > input:focus  {
    outline: none;
}

.projects > .search-container > .search-bar:focus-within {
    background-color: var(--bg1)
}


.projects > .search-container > .search-bar > select  {
    color: var(--fg);
    background-color: transparent;
    border: none;

    cursor: pointer;

    font-size: 1.2em;
    text-align: end;
}

.projects > .results {
    gap: 1em;
    display: grid;
    grid-template-columns: 1fr 1fr;
}


@media screen and (max-width: 1200px) {
    .projects > .results {
        display: flex;
        flex-direction: column;
    }
}