.at-heroBanner {
    padding: 2.5rem 0;
}

.at-heroBanner--primaryBrandColor,
.at-heroBanner--primaryBrandColor .pbSearchForm__button {
    background: linear-gradient(to right, var(--primaryBrandLight), var(--primaryBrandRegular));
}

.at-heroBanner--events,
.at-heroBanner--events .pbSearchForm__button {
    background: linear-gradient(to right, var(--primaryGreenLight), var(--primaryGreenDark));
}

.at-heroBanner--experts,
.at-heroBanner--experts .pbSearchForm__button {
    background: linear-gradient(to right, var(--primaryYellowYellow), var(--primaryYellowOrange));
}

.at-heroBanner--tools,
.at-heroBanner--tools .pbSearchForm__button {
    background: linear-gradient(to right, var(--primaryRedPink), var(--primaryRedPurple));
}

.at-heroBanner--wiki,
.at-heroBanner--wiki .pbSearchForm__button {
    background: linear-gradient(to right, var(--primaryBlueLightBlue), var(--primaryBlueDarkBlue));
}

.at-heroBanner--community {
    background: var(--neutralsLight);
}

.at-heroBanner__title {
    margin-top: 0;
    color: var(--neutralsWhite);
}

.at-heroBanner--primaryBrandColor .at-heroBanner__text,
.at-heroBanner--events .at-heroBanner__text,
.at-heroBanner--tools .at-heroBanner__text,
.at-heroBanner--wiki .at-heroBanner__text {
    color: var(--neutralsWhite);
}

.at-heroBanner--experts .at-heroBanner__title {
    color: var(--primaryBrandRegular);
}

.at-heroBanner--community .at-heroBanner__title {
    color: var(--neutralsBlack);
}

.at-heroBanner__searchArticle .pbSearchForm__header {
    margin-bottom: .5em;
}

.at-heroBanner__searchArticle .pbSearchForm__searchField {
    position: relative;
    padding: .5rem;
    background: var(--neutralsWhite);
}

.at-heroBanner__searchArticle .pbSearchForm__input {
    padding-left: 4em;
    background-position: .8em center;
}

.at-heroBanner__searchArticle .pbSearchForm__button {
    outline: revert;
}

.at-heroBanner__searchArticle .pbSearchForm__button:hover {
    color: var(--neutralsWhite);
}

.at-heroBanner__searchArticle .pbSearchForm__mainColumn p {
    margin: 0;
    color: var(--neutralsWhite);
}

.at-heroBanner--community .pbSearchForm__button:hover,
.at-heroBanner--community .pbSearchForm__mainColumn p {
    color: var(--neutralsBlack);
}

@media (min-width: 800px) {
    .at-heroBanner {
        padding: 4rem 0;
    }

    .at-heroBanner__searchArticle .pbSearchForm__button {
        position: absolute;
        top: .5rem;
        right: .5rem;
        bottom: .5em;
    }

    .at-heroBanner__searchArticle .pbSearchForm__input {
        padding-right: 10em;
    }
}