/**
 * Home Page Styles
 *
 * Homepage layout and component styles.
 *
 * @package    Estylish
 * @author     Woracious
 * @since      1.0.0
 */

/*--------------------------------------------------------------
# Featured Posts Layout
--------------------------------------------------------------*/

.hippets {
	display: flex;
	gap: 40px;
}

.hippets aside {
	flex: 0 0 20%;
	min-width: 150px;
	display: flex;
	gap: 20px;
	flex-direction: column;
}

.hippets main {
	flex: 1 1 calc(100% - 80px - 400px);
}

/*--------------------------------------------------------------
# Post Card
--------------------------------------------------------------*/

.recur {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.recur img {
	display: block;
	width: 100%;
}

aside .recur h3 {
	font-size: 1.7rem;
	font-weight: 500;
	text-align: center;
}

main .recur h3 {
	font-weight: 500;
}

.recur p {
	text-align: center;
}

/*--------------------------------------------------------------
# Post Meta
--------------------------------------------------------------*/

.pategory {
	font-size: 1.2rem;
	letter-spacing: 5px;
}

.pauthor {
	font-size: 1rem;
}

.pauthor a {
	text-decoration: none;
	color: #000000;
}

/*--------------------------------------------------------------
# Trending Widget
--------------------------------------------------------------*/

.twidget {
	display: flex;
	flex-direction: column;
	gap: 20px;
	background-color: #f7f7f7;
	padding: 20px;
}

.twidget h5 {
	font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	font-weight: 600;
	text-align: center;
	font-size: 1.7rem;
}

.twidget h5 span {
	display: flex;
	align-items: center;
}

.twidget .pauthor {
	font-size: 0.9rem;
}

/*--------------------------------------------------------------
# Trending List Item
--------------------------------------------------------------*/

.recur-2 {
	display: flex;
	gap: 10px;
	align-items: center;
}

.recur-2 span {
	display: block;
	color: var(--theme);
	font-size: 2rem;
}

.recur-2 a {
	text-decoration: none;
	color: #000000;
}