form {
    width: 70rem; /* 700px */
    margin: 6.4rem auto;
    background: #ffffff;
    border: 1px solid #D3E2E5;

    border-radius: 2rem;

    overflow: hidden;
    
    padding: 8rem;
}

fieldset {
    border: 0;
}

fieldset + fieldset {
    margin-top: 8rem;
    /* pega o irmao (aplica em todos q te um fielset anteso) */
}

fieldset legend {
    width: 100%;

    font-size: 3.2rem;
    line-height: 1.5;

    color: #5c8599;
    font-weight: 700;

    border-bottom: 1px solid #d3e2e5;
    margin-bottom: 4rem;
    padding-bottom: 2.4rem;
}

.input-block + .input-block {
    margin-top: 2.4rem;
}

.input-block label {
    color: #8FA7B3;
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

.input-block label span {
    font-size: 1.4rem;
    color: #8FA7B3;
    margin-left: 2.4rem;
    line-height: 1.5;
}

.input-block input,
.input-block textarea {
    width: 100%;
    
    background: #f5f8fa;
    border: 1px solid #d3e2e5;
    border-radius: 2rem;

    color: #5c8599;       
}

.input-block input {
    height: 6.4rem;
    padding: 0 1.6rem;
}

.input-block input:valid,
.input-block textarea:valid {
    border: 1px solid #A1E9C5;
    /* quando tiver válido, quando estiver preenchido. O valor precisa estar required */
}


.input-block textarea{
    height: clamp(12rem, 16rem, 24rem );
    resize: vertical;
    padding: 1.6rem;
    line-height: 2.8rem;
}

/* Caso quisesee trocar a bordar de acessibilidade q mostra qual item esta selecionado basta aplicar um outline: none; no item e depois configurar o focus:
.input-block input:focus,
.input-block textarea:focus{
    border: 1px solid #fdd806
} */


.new-upload {
    position: relative;
}

.new-upload + .new-upload {
    margin-top: 2.4rem;
}

.new-upload span{
    position: absolute;
    /* como foi aplicado a posicao relativa no new-upload, o botao (span) fica absoluto mas so dentro da caixa e não na tela inteira */
    
    right: 12px;
    bottom: 14px;
    
    background: #FFFFFF;
    border: 1px solid #D3E2E5;
    box-sizing: border-box;
    border-radius: 10px;

    padding: 0.6rem ;
    display: flex;
    
    cursor: pointer;
}



.input-block.images button {
    width: 100%;

    background: #F5F8FA;
    border: 1px dashed #96D2F0;
    border-radius: 2rem;

    height: 6.4rem;
    padding: 0 1.6rem;
    margin-top: 2.4rem;
    
    cursor: pointer;
}

.button-select{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.button-select button {
    height: 6.4rem;
    background: #f5f8fa;
    border: 1px solid #d3e2e5;
    color: #5c8599;
    cursor: pointer;
}

.button-select button:first-child{
    border-radius: 2rem 0 0 2rem;
}

.button-select button:last-child{
    border-radius: 0 2rem 2rem 0;
}

.button-select button.active {
    background: #edfff6;
    border: 1px solid #a1e9c5;
    color: #37c77f;
}