#search {
    @apply mb-4 flex flex-wrap;

    [name="search"] {
        @apply bg-gray-800 border-gray-700 text-white rounded w-full border appearance-none text-base p-2 mb-2;

        &:focus {
            @apply border-teal-500 outline-none;
        }
    }

    #buttons {
        @apply flex flex-1 justify-between mb-2;

        button {
            @apply flex-1;
        }

        a, span {
            @apply ml-2 flex-1 inline-block text-center;
        }
    }
}

@screen md {
    #search {
        [name="search"] {
            @apply mb-0 /* @formatter:off */ w-2/3 /* @formatter:on */ flex-1;
        }

        #buttons {
            @apply mb-0;
        }
    }
}