@media screen and (min-width: 900px) {
    .post-search {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 305px auto; 
    }
}
.search-box,
.filter-box {
    padding: 20px;
}
.search-box {
    align-content: center;
    position: relative;
}
input.post-search-input {
    background-color: var(--blue);
    border: none;
    border-bottom: 1px solid #fff;
    border-radius: 0;
    color: #fff;
    font-size: 16px;
    padding: 8px 0;
    background-repeat: no-repeat;
    background-position: right center;
    width: 100%;
    position: relative;
}
.search-box:after {
    content: "\f002"; 
    font-family: "FontAwesome"; 
    position: absolute; 
    right: 20px; 
    top: 50%; 
    transform: translateY(-50%);
    color: var(--white);
}
input.post-search-input::placeholder {
    color: #fff !important;
    opacity: 1;
}
input.post-search-input:focus {
    background-color: var(--blue);
}

input.post-search-input::-webkit-search-cancel-button {
    display: none !important; 
}
.post-filter:has(option[selected="selected"]) {
    background-color: var(--blue);
    border-color: var(--blue);
}
.post-filter {
     -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none !important;
    border-radius: 0px;
    border: 1px solid #fff;
    padding: 15px 12px;
    line-height: 1.2;
    width: 100%;
    margin-bottom: 10px;
    font-size: 16px; 
    background-color: var(--midnight);
    color: #fff;
}
@media screen and (min-width: 700px) {
    .filter-box .dropdowns {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
    }
}

.post-filter:has(option[selected="selected"]) {
    background-color: var(--blue);
    border-color: var(--blue);
}