.ww-gw-hero {
    --container-aspect-ratio: 1;
    --container-before-content: unset;

    --content-inline-size: 100%;
    --content-font-size: 1rem;
    --content-margin-inline: 25% 1rem;

    --heading-font-size: 2rem;
    --heading-line-height: 115%;
    --heading-margin-block: 0 1rem;

    --image-url: var(--mobile-image-url);

    aspect-ratio: var(--container-aspect-ratio);
    width: 100%;
    height: auto;

    position: relative;

    background-image:
        linear-gradient(to left, #231f20, rgba(255, 255, 255, 0)),
        var(--image-url);

    background-size: cover;
    background-position: center;

    font-family: var(--fonts-montserrat);
    color: var(--colors-white);

    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    .ww-gw-hero {
        --container-aspect-ratio: 16 / 6;
        --container-before-content: '';

        --content-font-size: 1.3rem;
        --content-inline-size: 60%;
        --content-margin-inline: 50% 0rem;


        --heading-font-size: 2rem;
        --heading-line-height: 100%;
        --heading-margin-block: 0 1.5rem;

        --image-url: var(--desktop-image-url);
    }
}

@media (min-width: 1024px) {
    .ww-gw-hero {        
        --heading-font-size: 3rem;
        --heading-line-height: 112.5%;
        --heading-margin-block: 0 2rem;
    }
}
.ww-gw-hero::before {
    content: var(--container-before-content);

    --bar1-color: #6fdafa;
    --bar2-color: #ed6b2f;
    --bar3-color: #FFCE82;

    --bar1-width: 11px;
    --bar2-width: 13px;
    --bar3-width: 20px;

    --bar1-start: 0px;
    --bar1-end: calc(var(--bar1-start) + var(--bar1-width));
    --bar2-end: calc(var(--bar1-end) + var(--bar2-width));
    --bar3-end: calc(var(--bar2-end) + var(--bar3-width));

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(to right,
            var(--bar1-color) var(--bar1-start), var(--bar1-color) var(--bar1-end),
            var(--bar2-color) var(--bar1-end), var(--bar2-color) var(--bar2-end),
            var(--bar3-color) var(--bar2-end), var(--bar3-color) var(--bar3-end),
            transparent var(--bar3-end));

    opacity: 70%;
}

.ww-gw-hero .content {
    inline-size: var(--content-inline-size);
    margin-inline: var(--content-margin-inline);
}

.ww-gw-hero h1 {
    font-size: var(--heading-font-size);
    line-height: var(--heading-line-height);

    font-weight: bold;
    text-wrap: balance;
    margin-block: var(--heading-margin-block);
}

.ww-gw-hero p {
    font-size: var(--content-font-size);
    text-transform: uppercase;
    text-wrap: pretty;
}