.give_forms_page_give-reports .give-sale-banners-container, .givewp-sale-banners-container {
    /* Box-sizing reset */
    &,
    & *,
    & ::before,
    & ::after {
        box-sizing: border-box;
    }

    margin: 0 auto;
}

.give_forms_page_give-reports .give-sale-banner, .give-sale-banner {
    position: relative;
    display: flex;
    justify-content: space-between;
    background: #1D202F;
    padding: 2rem 1.25rem 1.5rem 3.25rem;
    box-shadow: 0 0.0625em 0.25em rgba(0, 0, 0, 0.25);
    font-size: clamp(max(0.875rem, 14px), 2vw, max(1rem, 16px));
    color: #F9FAF9;
    overflow: hidden;
}

.give_forms_page_give-reports .give-sale-banner-content, .give-sale-banner-content {
    flex: .7;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3rem;


    & * {
        font-size: inherit;
        font-family: 'Neurial Grotesk', Montserrat, sans-serif;
    }

    a {
        color: inherit;
        text-decoration-thickness: 0.05em;
        transform-style: preserve-3d;

        &::after {
            content: "";
            position: absolute;
            transform: translateZ(-1px);
            display: block;
            background-color: #fff;
            height: calc(100% + 0.2em);
            width: calc(100% + 0.6em);
            top: -0.1em;
            left: -0.3em;
            opacity: 0;
            box-shadow: 0 0.0625em 0.125em rgba(0, 0, 0, 0.05);
            transition: opacity 0.2s ease-in-out;
        }

        &:focus {
            outline: none;
            box-shadow: none;
        }
    }

    &__primary-cta {
        white-space: nowrap;

        &__header, &__sub-header {
            flex: 1 1 auto;
            margin: 0;
            padding: 0;
            line-height: 29px;
            color: #F9FAF9;
        }

        &__header {
            font-size: 1.5rem;
            font-weight: 700;
        }

        &__sub-header {
            font-size: 1.25rem;
            font-weight: 300;
            line-height: normal
        }

        &__link {
            font-family: 'Inconsolata', Montserrat, sans-serif;
            font-size: .875rem;
            display: inline-flex;
            padding: 0.73125rem 1.6714375rem;
            justify-content: center;
            align-items: center;
            background: #62B265;
            border-radius: 9999px;
            text-decoration: none;
            margin: 1rem auto 0 0;
        }
    }

    &__secondary-cta {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        &__content {
            font-size: 1rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }
    }
}

.give-sale-banner-dismiss.givewp-sale-banner__dismiss[aria-label="Dismiss"][aria-controls][data-id] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    --size: 1.25rem;
    appearance: none;
    background: none;
    display: grid;
    place-content: center;
    padding: 0;
    width: var(--size);
    height: var(--size);
    border: 0;
    outline-offset: 0.25rem;
    color: inherit;
    cursor: pointer;
    font-size: inherit;
    transition: color 0.2s, transform 0.2s;
    z-index: 999;

    & svg {
        width: var(--size);
        height: var(--size);
        transition: fill 200ms ease-in-out;
        fill: none;

        /* This ensures that the event target is the button when clicked. */
        pointer-events: none;
    }

    &:hover {
        transform: scale(1.15);
    }

    &:active {
        transform: scale(0.95);
    }
}

.give-sale-banner__abstract-icon {
    position: absolute;
    bottom: 0;
    right: 0;
}


@media screen and (min-width: 1800px) {
    .give-sale-banner__abstract-icon {
        bottom: -4rem;

        svg {
            width: 330px;
            height: 224px;
        }
    }
}

@media screen and (max-width: 1200px) {
    .give-sale-banner-content {
        gap: 1.5rem;

        & a {
            font-size: 0.875rem;
        }

        &__primary-cta {
            white-space: normal;
        }

        &__secondary-cta {
            gap: 1rem;
        }
    }

    .give_forms_page_give-reports .give-sale-banner-content__primary-cta {
        white-space: normal;
    }
}

@media screen and (max-width: 770px) {
    .give-sale-banner {
        padding-left: 1rem;
    }

    .give_forms_page_give-reports .give-sale-banner-content__secondary-cta, .give-sale-banner-content__secondary-cta {
        display: none;
    }

    .give-sale-banner__abstract-icon {
        max-width: 8.25rem;
        max-height: 9.5rem;
        right: 6rem;
    }
}