.records {
    position: relative;
}

.records .err,
.records2 .err {
    display: none;
}

.records.invalid .err {
    position: absolute;
    color: hsl(0, 100%, 50%);
    font-size: 1.2rem;
    display: block;
}

.records2.invalid .err {
    color: hsl(0, 0%, 100%);
    font-size: 1.2rem;
    display: block;
    text-align: start;
}

.records.invalid .campo,
.records2.invalid .campo {
    border: 1px solid hsl(0, 100%, 50%);
}

@media (max-width: 1024px) {
    .records.invalid .err {
        position: absolute;
        left: 10px;
    }

    .records2.invalid .err {
        width: fit-content;
    }
}

@media (max-width: 580px) {
    .records.invalid .err {
        position: absolute;
        left: 10px;
    }
}