/* -------------------------
DEVLOG HERO
--------------------------*/

.devlog-hero {
	padding:120px 20px 80px;
	text-align:center;
	background:#0c0f17;
	color:#fff;
	border-radius: 18px;
}

.devlog-hero h1{

font-size:42px;
letter-spacing:0.15em;
margin-bottom:20px;

}

.devlog-hero p{

opacity:0.7;
font-size:16px;

}


/* -------------------------
GRID
--------------------------*/

.devlog-grid {
	max-width:1200px;
	margin:auto;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
	gap:40px;
	padding: 80px 20px;
}
@media screen and (min-width: 768px) {
	.devlog-grid {
		padding: 80px 0;
	}
}


/* -------------------------
CARD
--------------------------*/

.devlog-card{

background:#fff;
border-radius:18px;

overflow:hidden;

box-shadow:0 20px 40px rgba(0,0,0,0.08);

transition:0.35s;

}

.devlog-card:hover{

transform:translateY(-6px);

box-shadow:0 30px 60px rgba(0,0,0,0.12);

}

.devlog-card a{

text-decoration:none;
color:inherit;

}


/* -------------------------
IMAGE
--------------------------*/

.devlog-thumb img{

width:100%;
display:block;

}


/* -------------------------
BODY
--------------------------*/

.devlog-body{

padding:22px 26px;

}

.devlog-title{

font-size:18px;
margin-bottom:12px;

}

.devlog-date{

font-size:12px;
opacity:0.6;

}