form.search-form {
    display: flex;
    position: relative;
    align-items: center;
    gap: calc(var(--gap)* 0.25);
    z-index: 1;
}
input.search-field {
    padding: calc(var(--gap) * 0.4) calc(var(--gap) * 2) calc(var(--gap) * 0.4) calc(var(--gap) * 1)!important;
    height: auto;
    min-height: 0;
    background-color: #ffffff2d;
    border-radius: calc(var(--radius) * 5);
    border: 1px solid transparent;
    color: var(--white);
    width: clamp(220px, 10vw, 300px);
    transition: border-radius 250ms ease-in-out, border 250ms ease-in-out;
}
input.search-field:focus {
    outline: none;
    border: 1px solid var(--white);
    border-radius: calc(var(--radius) * 1);
}
input.search-field::placeholder,
input.search-field::-webkit-input-placeholder{
    color: var(--white);
    opacity: 0.5;
}
.search-submit{
    border: none;
    padding: calc(var(--gap) /3);
    line-height: 0;
    background-color: transparent;
    position: absolute;
    right: calc(var(--gap) /3);
    top: 50%;
    transform: translate(0, -50%);
    height: 100%;
}
form.search-form input[type="submit"]{
    width: fit-content;
}


@media (max-width: 576px) {
    input.search-field{
        width: clamp(180px, 10vw, 300px);
    }
    form#search-form{
        flex-direction: column;
        gap: var(--gap);
    }
    form#search-form > *{
        width: 100%;
    }
    form#search-form > input[type="submit"]{
        width: 100%;
    }
}