.search{
    height:52px;
    margin-bottom:30px;
    background: var(--bg-5);
    border: 1px solid var(--border);
    border-radius:17px;
    display:flex;
    align-items:center;
    padding:0 16px;
    gap:12px;
}

.search::selection {
    background: #4c676d;
}

.search .material-icons{
    color:var(--muted);
}

.search input{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    font-size:.95rem;
    font-family:inherit;
    user-select:text;
}

.search input::placeholder{
    color:#70757d;
}

.section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}

.section-title h3{
    font-size:1.1rem;
    font-weight:600;
}

.section-title span{
    color:var(--muted);
    font-size:.8rem;
}

.categories{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-bottom:30px;
}

.category{
    position:relative;
    min-height:135px;
    padding:20px;
    color:var(--text);
    background: var(--bg-5);
    border: 1px solid var(--border);
    border-radius:20px;
    text-align:left;
    overflow:hidden;
    transition:.2s;
    will-change: transform;
}

.category:hover{
    background:var(--surface2);
}

.category:active{
    transform:scale(.98);
}

.category-icon{
    width:43px;
    height:43px;
    border-radius:14px;
    background:#424f5a;
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
}

.category-icon .material-icons{
    font-size:23px;
}

.category h4{
    font-size:1rem;
    font-weight:600;
}

.category p{
    margin-top:4px;
    color:var(--muted);
    font-size:.78rem;
    line-height:1.35;
}

.category .arrow{
    position:absolute;
    right:16px;
    top:16px;
    color:#555b67;
}

@media(max-width:500px){
    .categories{
        gap:10px;
    }

    .category{
        min-height:128px;
        padding:17px;
    }

}