/*=========================================================
Room Ideas
=========================================================*/

.room-ideas{
	padding:90px 0;
	background:#f8fafc;
}

.room-ideas .container{
	max-width:1400px;
	margin:auto;
	padding:0 24px;
}

/*=========================================================
Grid
=========================================================*/

.room-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:28px;
}

/*=========================================================
Card
=========================================================*/

.room-card{
	background:#fff;
	border-radius:24px;
	overflow:hidden;
	box-shadow:0 18px 45px rgba(0,0,0,.08);
	transition:.35s;
}

.room-card:hover{
	transform:translateY(-6px);
	box-shadow:0 30px 60px rgba(0,0,0,.14);
}

.room-thumb{
	display:block;
	overflow:hidden;
}

.room-image{
	width:100%;
	height:240px;
	object-fit:cover;
	display:block;
	transition:.5s;
}

.room-card:hover .room-image{
	transform:scale(1.08);
}

/*=========================================================
Content
=========================================================*/

.room-content{
	padding:22px;
}

.room-label{
	display:inline-block;
	padding:6px 14px;
	background:#eef4ff;
	color:#2563eb;
	font-size:12px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.08em;
	border-radius:999px;
	margin-bottom:14px;
}

.room-title{
	margin:0 0 14px;
	font-size:23px;
	line-height:1.35;
	font-weight:800;
}

.room-title a{
	color:#111827;
	text-decoration:none;
	transition:.3s;
}

.room-title a:hover{
	color:#2563eb;
}

.room-meta{
	font-size:13px;
	color:#6b7280;
}

/*=========================================================
Responsive
=========================================================*/

@media(max-width:1200px){

	.room-grid{
		grid-template-columns:repeat(2,1fr);
	}

}

@media(max-width:768px){

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

	.room-image{
		height:220px;
	}

	.room-title{
		font-size:21px;
	}

}