.blocks-container>.search-block {
    margin: var(--block-margin) auto 0;
}

.search-block {
    display: none;
    align-items: center;
    background-color: var(--color-light-grey);
    border-radius: 5rem;
    height: 8rem;
}

.search-block .search-wrapper {
    display: grid;
    grid-template-columns: 6rem 25rem 1fr;
    align-items: center;
    margin: 0 var(--page-padding);
    column-gap: 1rem;
}

.search-block .search-wrapper svg {
    width: 6rem;
}

.search-block .search-wrapper svg rect {
    fill: transparent;
}

.search-block .search-wrapper svg path {
    fill: var(--color-purple);
}

.search-block .search-wrapper h2 {
    font: var(--font-headline-7);
    color: var(--color-purple);
    margin: 0;
    text-align: center;
}

.search-block .search-wrapper form {
    display: grid;
    grid-template-columns: 1fr 10rem;
}

.search-block .search-wrapper form input[type="text"] {
    background: var(--color-white);
    border-radius: 5rem 0rem 0rem 5rem;
    border-color: var(--color-white);
}

.search-block :is(.primary-button, .wp-block-button:not(.is-style-outline) > .wp-element-button) {
    background-color: var(--color-purple);
    border: none;
    border-radius: 0rem 5rem 5rem 0rem;
}

.search-block :is(.primary-button, .wp-block-button:not(.is-style-outline) > .wp-element-button):is(:active, :focus, :hover) {
    background-color: var(--color-dark-purple);
}

@media (min-width: 992px) {

    .search-block {
        display: grid;
    }

}