.text-counter{

    margin:auto;

}
.text-counter textarea{

    display:block;

    width:calc(100% - 30px);
    min-height:300px;

    padding:15px;

    border:1px solid #ddd;
    border-radius:12px;

    resize:vertical;

    font-size:16px;
    line-height:2;

    outline:none;

    box-sizing:border-box;

}

.text-counter textarea:focus{

    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}

.counter-box{

    display:flex;
    gap:15px;

    margin-top:15px;

}

.counter-item{

    flex:1;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:10px;

    padding:15px;

    text-align:center;

}

.counter-item span{

    display:block;

    font-size:28px;
    font-weight:bold;

    color:#2563eb;

}

.counter-item small{

    color:#666;

}

@media(max-width:700px){

    .counter-box{

        flex-direction:column;

    }

}