.navbar {
    background-color: var(--bg-color);
}

.navbar-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);

    grid-column-gap: 1rem;
    grid-row-gap: 1rem;

    margin-left: auto;
    margin-right: auto;

    padding-top: clamp(1px, 5vw, 16px);
    padding-bottom: clamp(1px, 5vw, 16px);

    max-width: 1440px;
}

.nav-left {
    grid-area: 1 / 1 / 2 / 4;
}

.nav-center {
    grid-area: 2 / 1 / 3 / 7;
}

#search-form {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    gap: 1rem;
}

#search-form input,
#search-form select,
#search-form button {

    width: 100%;
}

.nav-right {
    display: flex;
    gap: 1rem;
    grid-area: 1 / 4 / 2 / 7;
}

@media (min-width: 768px) {
    .nav-left {
        grid-area: 1 / 1 / 3 / 2;
    }
    .nav-center {
        grid-area: 1 / 2 / 3 / 5; 
    }

    #search-form {
        gap: 0.5rem;
    }
    .nav-right {
        grid-area: 1 / 5 / 3 / 7;
        gap: 0.5rem;
    }
}