.hero {
	padding-inline:var(--global_padding);
	text-align: center;

    &:has(p) h1 {
        margin-bottom:2rem;
    }

	& p {
        position: relative;
        z-index:3;
		max-width:65ch;
		margin-inline:auto;
	}
}
.form {
    margin-top:3rem;
    padding-bottom:var(--global_block_padding);
    padding-inline:1rem;
    position: relative;
    width:min(500px,100%);
    margin-inline:auto;
    
    & .inner {
        position: relative;
        z-index:2;
        padding:clamp(1.5rem,2vw,2rem);
        border-radius:1rem;
    }

    & .success {
        margin:0;
    }

    & form {
        display:grid;
        gap:1rem;
        position: relative;
        z-index:2;
    }

    & .submit {
        justify-self:end;
    }

    & :is(#capy,#monkey,#palm) {
        position: absolute;
    }

    & #palm {
        z-index:0;
        left: -30%;
        top: -24%;
        width:max(300px,70%);
    }
    & #capy {
        right:96.2%;
        bottom:5%;
        width:max(100px,25%);
    }
    & #monkey {
        left:96.2%;
        top:10%;
        width:max(100px,25%);
    }
}

@media screen and (max-width:500px){
    .form {
        & #palm {
            top:-15%;
        }
        & #capy {
            right:calc(100% - 17px);
        }
        & #monkey {
            left:calc(100% - 16px);
        }
    }
}