.gc-hero__component {
    color: var(--color-white);
    background-color: var(--color-background--secondary);
    border-radius: 1.5rem;
    padding: 4rem 1.5rem 1.5rem;
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    flex-flow: column;
    justify-content: center;
    height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;

    @media screen and (min-width: 480px) {
        padding: 5.625rem 2.5rem;
        border-radius: 3.125rem;
    }
}

.gc-hero__top-content {
    justify-content: space-between;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    position: relative;

    @media screen and (min-width: 480px) {
        font-size: 1.375rem;
    }
}

.gc-hero__title {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    flex-flow: column;
    display: flex;
    position: relative;
    z-index: 2;

    @media screen and (min-width: 480px) {
        font-size: 1.375rem;
    }

    h1 {
        font-weight: 800;
        font-size: 25px;

        @media screen and (min-width: 480px) {
            font-size: 32px;
        }

        @media screen and (min-width: 640px) {
            font-size: clamp(2.5rem, 3.7037037037vw + 1.6666666667rem, 5rem);
        }
    }

    div {
        max-width: 55rem;
    }

    mark {
        background: var(--linear-gradient);
        background-clip: text;
        -webkit-text-fill-color: transparent;
        padding: 0;
    }
}

.hero-cta-wrapper {
    z-index: 1;
    align-self: flex-start;
    position: relative;
}

.gc-hero__svg {
    z-index: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: auto -30% -20% auto;
    width: 17rem;
    height: 17rem;

    @media screen and (min-width: 480px) {
        inset: auto -9% -26% auto;
        width: 24rem;
        height: 24rem;
    }

    @media screen and (min-width: 992px) {
        width: 33.5625rem;
        height: 33.25rem;
    }
}