.mod-subscription-container{
    container-type: inline-size;
    container-name: mod-subscribe;
    margin: 30px auto;
    background: var(--bg);   
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 
}

.mod-subscription-form{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 100px;
    gap: 2rem;
    align-items: center;
}

@container mod-subscribe (max-width: 800px){
    .mod-subscription-form{
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
    }
}


@container mod-subscribe (max-width: 500px){
    .field-name {
        grid-area: name;
    }

    .field-email {
        grid-area: email;
    }

    .field-submit {
        grid-area: submit;
    }

    .mod-subscription-form {
        gap: 0.4rem;
        grid-template-columns:
            1fr;

        grid-template-areas:
            "name"
            "email"
            "submit";
    }
}