@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

body{
	font-family: 'poppins', sans-serif;
	background-color:#673AB7;
}


.blog-post{
	display:flex;
	flex-direction: row;
	margin: 10rem;
	justify-content:center;
	align-items:center;
	background-color:white;
	
}


.blog-post-img{
	flex:1;
	padding: 2rem 2rem 2rem 0rem;
}

.blog-post-img>img{
	width:100%;
	height:100%;
	border-radius:0.3rem;
	object-fit:cover;
	transform: translateX(-50px);
	box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.5);
}


.blog-post-info{
	flex:2;
	padding:2rem;
}

.blog-post-title h2{
	color:#673AB7;
	text-transform:uppercase;
}




.blog-post-read-more a{
	cursor:pointer;
	text-decoration:none;
	font-style:normal;
	border-radius:0.3rem;
	padding:0.5rem;
	background-color:#fff;
	border:1px solid #673AB7;
	color:#673AB7 !important;
	box-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.25);
}



.blog-post-read-more a:hover{
	transition: 0.5s;
	background-color: #673AB7;
	border: 1px solid #673AB7;
	color: #fff !important;
	text-decoration:none;
}














/* mobile*/

@media only screen and (max-width: 600px)
{
	.blog-post{
	display:flex;
	flex-direction: column;
	margin-top: 3rem;
	margin-left:1rem;
	margin-right:1rem; 
	justify-content:center;
	align-items:center;
	background-color:white;
	
}


.blog-post-img{
	flex:1;
	padding: 0rem 1rem 0rem 1rem;
}

.blog-post-img>img{
	width:100%;
	height:100%;
	border-radius:0.3rem;
	object-fit:cover;
	transform: translateY(-20px);
	box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.5);
}


.blog-post-info{
	flex:2;
	padding:rem 1rem 2rem 1rem;
}
	
	
}












/* tablet*/


@media only screen and (min-width: 768px)
{

.blog-post{
	display:flex;
	flex-direction: row;
	margin: 10rem;
	justify-content:center;
	align-items:center;
	background-color:white;
	
}

.blog-post-img{
	flex:1;
	padding: 2rem 2rem 2rem 0rem;
}
.blog-post-img>img{
	width:100%;
	height:100%;
	border-radius:0.3rem;
	object-fit:cover;
	transform: translateY(-20px);
	box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.5);
}


.blog-post-info{
	flex:2;
	padding:rem 1rem 2rem 1rem;
}
	
}


















/* laptop*/


@media only screen and (min-width: 992px)
{

.blog-post{
	display:flex;
	flex-direction: row;
	margin: 10rem;
	justify-content:center;
	align-items:center;
	background-color:white;
	
}

.blog-post-img{
	flex:1;
	padding: 2rem 2rem 2rem 0rem;
}
.blog-post-img>img{
	width:100%;
	height:100%;
	border-radius:0.3rem;
	object-fit:cover;
	transform: translateX(-50px);
	box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.5);
}


.blog-post-info{
	flex:2;
	padding:2rem;
}

}