:root{
  --card-bg:#fff;
  --card-b:#e6e8ee;
  --text:#101828;
  --heading:#856259;
  --primary:#fa9403;
  --muted:#667085;
  --shadow:0 6px 22px rgba(16,24,40,.08);
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:#f6f7fb}
.wrap{max-width:100%;margin:0 auto;padding:28px 16px 60px}

.topbar{height:100px;display:flex;align-items:center;gap:14px}
.logo{width:44px;height:44px;border:1px solid var(--card-b);border-radius:10px;background:#fff;box-shadow:var(--shadow)}
.brand{
	font-weight: 800;
	letter-spacing: .2px;
	color: var(--heading);
	font-weight: 500;
}

.grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:14px;
}

.card{
  background:var(--card-bg);
  border:1px solid var(--card-b);
  border-radius:12px;
  padding:14px;
  box-shadow:var(--shadow);
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.card_in{width:100%}

.icon{
  width:44px;height:44px;flex:0 0 44px;
  border:1px solid var(--card-b);
  border-radius:10px;
  display:grid;place-items:center;
  background:#fbfbfd;
  overflow:hidden;
}
.icon img{width:26px;height:26px;object-fit:contain;display:block}

.card h3{margin:0 0 2px;font-size:15px;color:var(--heading)}
.sub {
	margin: 0 0 8px;
	color: var(--muted);
	font-size: 12.5px;
	min-height: 40px;
}
.sub-wrap{min-height:30px}
.desc-wrap{min-height:90px}
.desc{margin:0;color:#344054;font-size:13px;line-height:1.35}

.card a{
	margin-top: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--primary);
	color: #fff;
	text-decoration: none;
	font-weight: 800;
	font-size: 13px;
	padding: 10px 14px;
	border-radius: 10px;
	line-height: 1;
	width: 100%;
}
.card a:hover{
	background: var(--heading);	
}

@media (max-width: 1500px){
  .grid{grid-template-columns:repeat(5, minmax(0,1fr));}
}


@media (max-width: 1200px){
  .grid{grid-template-columns:repeat(4, minmax(0,1fr));}
}


@media (max-width: 1100px){
  .grid{grid-template-columns:repeat(3, minmax(0,1fr));}
}
@media (max-width: 980px){
  .grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 620px){
  .grid{grid-template-columns:1fr;}
}
