.hero-signup{
    container-type: inline-size;
    container-name: mod-hero;
}

.full-signup{
    container-type: inline-size;
    container-name: mod-full;
}

.hero-signup > div, .full-signup > div{
    display: grid;
    gap: 1rem;
}

.hero-signup > div {
    grid-template-columns: repeat(2, 1fr);
}

.hero-signup form, .full-signup form{
    margin: 30px auto;
    background: var(--bg);   
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 
}

.hero-signup form{
    max-width: 420px;
}

.hero-signup__content{
    margin-top: 80px;
}

.full-signup form{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5em;
}

.full-signup form > .grid-span-2{
    grid-column: span 2;
}

@container mod-hero (max-width: 800px){
    .hero-signup  > div{
        gap: 0.4rem;
        grid-template-columns:
            1fr;
    }
}

@container mod-full (max-width: 600px){
    .full-signup form{
        gap: 0.4rem;
        grid-template-columns:
            1fr;
    }

    .full-signup form > .grid-span-2{
        grid-column: span 1;
    }
}

#jform_hb_website{
    position: absolute;
    left: -9999px;
}

div.hero-signup #jform_captcha-lbl, div.full-signup #jform_captcha-lbl{
    display: none;
}