.cfg-wrapper{
padding:30px 0 60px;
}

.cfg-header{
text-align:center;
margin-bottom:40px;
}

.cfg-title{
font-size:38px;
font-weight:800;
margin-bottom:10px;
}

.cfg-subtitle{
opacity:.8;
line-height:1.6;
}

.cfg-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
gap:25px;
}

.cfg-card{
background:var(--card);
border:1px solid var(--transparent-5-w);
border-radius:18px;
padding:25px;
display:flex;
flex-direction:column;
transition:.25s;
}

.cfg-card:hover{
border-color:var(--button);
transform:translateY(-3px);
box-shadow:0 15px 35px rgba(0,0,0,0.25);
}

.cfg-card-title{
font-size:22px;
font-weight:800;
margin-bottom:15px;
}

.cfg-textarea{
width:100%;
min-height:150px;
background:rgba(0,0,0,0.25);
border:1px solid var(--transparent-5-w);
border-radius:12px;
padding:15px;
color:#fff;
font-family:Consolas,monospace;
font-size:14px;
resize:vertical;
margin-bottom:15px;
outline:none;
transition:.2s;
}

.cfg-textarea:focus{
border-color:var(--button);
background:rgba(0,0,0,0.35);
}

.cfg-buttons{
display:flex;
gap:10px;
}

.cfg-btn-copy,
.cfg-btn-clear{
flex:1;
background:var(--input-form);
border:1px solid var(--transparent-5-w);
padding:12px;
border-radius:10px;
cursor:pointer;
font-weight:700;
transition:.2s;
}

.cfg-btn-copy:hover{
background:var(--button);
}

.cfg-btn-clear:hover{
background:#e74c3c;
}

@media(max-width:768px){

.cfg-grid{
grid-template-columns:1fr;
}

}