/*-- -------------------------- -->
<---          Sidebar           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0em) {
	.blog-sidebar {
		width: 100%;
		max-width: (795/16em);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		row-gap: (50/16em);
	}
	.blog-sidebar_widget-wrapper {
		width: 100%;
		padding: (20/16em) (16/16em);
		margin-bottom: (30/16rem);
		border: 1px solid #a2a0a0;
		border-radius: (8/16em);
	}

	.blog-sidebar_widget-header {
		font-size: (20/16em);
		font-weight: bold;
		text-align: center;
		margin-bottom: (16/16rem);
		color: var(--headerColor);
		display: block;
		position: relative;

		&:after {
			content: "";
			width: (50/16rem);
			height: 3px;
			margin: (16/16rem) auto;
			background: var(--headerColor);
			border-radius: (4/16rem);
			display: block;
			position: relative;
		}
	}

	.blog-sidebar_widget-link {
		text-decoration: none;
		width: 100%;
		padding: (20/16rem) 0;
		border-bottom: 1px solid #a2a0a0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		column-gap: (24/16em);

		&:nth-of-type(1) {
			padding-top: 0;
		}

		&:last-of-type {
			padding-bottom: 0;
			border: none;
		}
	}

	.blog-sidebar_widget-image {
		width: (60/16em);
		height: (60/16em);
		border-radius: 50%;
		display: block;
		position: relative;
		overflow: hidden;
		flex: none;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.blog-sidebar_widget-h4 {
		font-size: (14/16rem);
		font-weight: 700;
		line-height: 1.5em;
		text-decoration: none;
		margin: 0;
		margin-bottom: (4/16rem);
		color: var(--headerColor);
		display: block;
	}

	.blog-sidebar_widget-date {
		font-size: (14/16rem);
		line-height: 1.5em;
		color: var(--bodyTextColor);
		display: block;
	}
}

/* Tablet - 1024px */
@media only screen and (min-width: 64em) {
	.blog-sidebar {
		max-width: (360/16em);
		position: sticky;
		top: 10rem; /* magic number to align with the header */
	}

    .blog-sidebar_widget-wrapper {
		padding: (35/16em) (30/16em);
		margin-bottom: 0;
	}

    .blog-sidebar_widget-header {
        margin-bottom: (30/16rem);
    }
}

/* Dark Mode */
@media only screen and (min-width: 0em) {
	body.dark-mode {
		.blog-sidebar_widget-header {
			color: var(--bodyTextColorWhite);
	
			&:after {
				background: var(--primary);
			}
		}

		.blog-sidebar_widget-date {
			color: var(--bodyTextColorWhite);
			opacity: 0.8;
		}
	}
}



