.recommend .logged-in {
    background: var(--white);
    border-radius: var(--border-radius-small);
    padding: var(--spacing-default);
    margin-top: var(--spacing-medium);
}

.recommend .logged-in h2 {
    font-size: var(--font-size-h4);
    padding-bottom: var(--spacing-default);
    margin-bottom: var(--spacing-default);
}

.recommend .logged-out {
    background: var(--white);
    border-radius: var(--border-radius-small);
    padding: var(--spacing-default);
    margin-top: var(--spacing-medium);
}

.recommend .logged-out h2 {
    font-size: var(--font-size-h4);
    padding-bottom: var(--spacing-default);
    margin-bottom: var(--spacing-default);
}

.recommend .logged-out .flex-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
    flex-wrap: wrap;
}

.recommend .logged-in form {
    display: flex;
    gap: 1rem;

    @media (max-width: 500px) {
        flex-direction: column;
    }
}

.recommend .logged-in form input {
    border-top-width: var(--border-width-default);
    border-right-width: var(--border-width-default);
    border-bottom-width: var(--border-width-default);
    border-left-width: var(--border-width-default);
    border-style: solid;
    border-color: var(--pale) !important;
    border-radius: var(--border-radius-small);
    background: var(--pale);
    color: var(--black);
    padding: 0 1rem;
    flex-grow: 1;
    transition-duration: var(--transition-duration);
    transition-property: color, border-color, background, background-color;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: inherit;
    font-size: var(--font-size-small);
    max-width: 70ch;

    @media (max-width: 500px) {
        height: 2.8rem;
    }
}

.recommend .logged-in form input:hover {
    background: var(--pale);
    border-color: var(--light) !important;
}