.error-display{
    display: none;
    gap: 12px;
    background: rgba(192, 57, 43, 0.07);
    border: 1.5px solid rgba(192, 57, 43, 0.25);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    animation: fadeUp 0.3s ease both;

    & icon{
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 10px;
        background: rgba(192, 57, 43, 0.12);
        font-size: 0.9rem;
        flex-shrink: 0;
        display: grid;
        place-items: center;
    } 
}

.error-display--shown{
    display: flex;
}

.error-display__wrapper{
    & h4{
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: #C0392B;
        margin-bottom: 3px;
    }

    & p{
        font-size: 0.78rem;
        color: #888;
        font-weight: 400;
        line-height: 1.5;
        max-width: 300px;
        text-align: start;
    }
}