.clearfix:after {
	display: block;
	clear: both;
	content: "";
}
.pxl---post {
	&.product {
		.pxl-item--meta {
			display: none !important;
		}
	}
}

.pxl-post--featured, 
.pxl-item--featured {
	img {
		width: 100%;
	}
}

.pxl-post--standard, .pxl-item--standard {
	border-radius: 11.165px 11.165px 15px 15px;
	background: #FFF;
	@include box-shadow(0px 11.165px 66.993px 0px rgba(137, 151, 186, 0.15));
	overflow: hidden;
	.pxl-item--featured {
		img {
			max-height: 511px;
		}
	}
	+ .pxl-post--standard {
		margin-top: 44.33px;
	}
	+ .pxl-item--standard {
		margin-top: 44.33px;
	}
	.pxl-item--metas {
		display: flex;
		align-items: center;
		padding: 26px 34px 27px 43px;
		gap: 17px;
		@media #{$max-md} {
			padding: 25px 30px;
		}
		@media #{$max-xs} {
			padding: 20px 15px;
			gap: 10px;
		}
	}
	.pxl-post--author {
		flex-grow: 1;
		display: inline-flex;
		align-items: center;
		gap: 13px;
		.pxl-author--avatar {
			img {
				min-width: 42px;
				width: 42px;
				height: 42px;
				border-radius: 50%;
				border: 2px solid var(--boarder-grey-1)
			}
		}
		.pxl-author--name {
			display: block;
			@extend .h6;
			color: var(--dark-2);
			&:hover {
				color: var(--primary-color);	
			}
			@media #{$max-xs} {
				font-size: 14px;
			}
		}
		.pxl-author--position {
			@extend .pxl-text6;
		}
	}
	.pxl-item--category {
		padding: 7px 12px;
		border-radius: 5px;
		background-color: var(--light-green-2);
		color: var(--primary-color);
		font-family: 'Montserrat';
		font-size: 16px;
		font-weight: 500;
		line-height: 1.5;
		@media #{$max-xs} {
			font-size: 14px;
			padding: 4px 8px;
		}
		a {
			color: inherit;
		}
	}
	.pxl-item--date {
		font-family: 'Montserrat';
		font-size: 18px;
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: -0.36px;
		white-space: nowrap;
		@media #{$max-xs} {
			font-size: 16px;
		}
		@media #{$max-3xs} {
			font-size: 14px;
		}
	}
	.pxl-item--divider {
		height: 1px;
		background: var(--boarder-grey-1);
		box-shadow: 0px 4.466px 11.165px 0px rgba(185, 185, 185, 0.25);
	}

	.pxl-item--content {
		padding: 20px 65px 44px 41px;
		@media #{$max-md} {
			padding: 20px 35px 30px;
		}
		@media #{$max-xs} {
			padding: 15px;
		}
	}
	.pxl-item--title {
		@extend .h7;
		color: var(--dark-2);
		margin-bottom: 22px;
		@media #{$max-sm} {
			font-size: 26px;
		}
		@media #{$max-xs} {
			font-size: 24px;
			margin-bottom: 15px;
		}
		@media #{$max-3xs} {
			font-size: 22px;
		}
	}
	.pxl-item--excerpt {
		@extend .pxl-text2;
		margin-bottom: 20px;
		@media #{$max-xs} {
			font-size: 16px;
			margin-bottom: 15px;
		}
	}
}

.pxl-post--details {
	.pxl-post--featured {
		margin-bottom: 29px;
	}
	.pxl-post--title {
		display: flex;
		justify-content: center;
		width: 100%;
		text-align: center;
		color: var(--dark-2);
		font-family: 'Montserrat';
		font-size: 46px;
		font-weight: 600;
		line-height: 1.5;
		letter-spacing: -0.92px;
		margin-bottom: 8px;
		@media #{$max-xl} {
			font-size: 42px;
		}
		@media #{$max-lg} {
			font-size: 38px;
		}
		@media #{$max-md} {
			font-size: 36px;
			.pxl-title--text {
				max-width: 650px;
			}
		}
		@media #{$max-sm} {
			font-size: 32px;
		}
		@media #{$max-xs} {
			font-size: 30px;
		}
		@media #{$max-3xs} {
			font-size: 28px;
		}
	}
	.pxl-post--meta {
		margin-bottom: 34px;
		.pxl-meta--inner {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			row-gap: 15px;
			column-gap: 36px;
			@media #{$max-sm} {
				column-gap: 25px;
				flex-wrap: wrap;
			}
		}
	}
	.pxl-post--item {
		@extend .h6;
		color: var(--dark-2);
	}
	.pxl-dflex-center-v {
		gap: 10px;
	}
	.pxl-post--author {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		@media #{$max-xs} {
			width: 100%;
			justify-content: center;
		}
		.pxl-author--avatar {
			img {
				min-width: 36px;
				width: 36px;
				height: 36px;
				border-radius: 36px;
			}
		}
		.pxl-author--name {
			.pxl-text--highlight {
				color: var(--text-1);
			}
		}
		.pxl-post--comment, .pxl-post--view {
			gap: 5px;
		}
	}
}

.pxl-post--footer {
	margin-top: 50px;
	margin-bottom: 75px;
	width: 100%;
	.pxl-socials {
		.pxl-item--title {
			color: var(--dark-2);
		}
		width: 100%;
		display: inline-flex;
		gap: 14px;
		padding-block: 40px;
		border-top: 1px solid var(--boarder-grey-1);
		border-bottom: 1px solid var(--boarder-grey-1);
		.pxl-social-group {
			display: inline-flex;
			align-items: center;
			gap: 9px;
			flex-wrap: wrap;
		}
		margin-bottom: 56px;
		a {
			color: var(--secondary-color);
			width: 116px;
			height: 33px;
			border-radius: 4px;
			font-family: "Noto Sans";
			font-size: 15px;
			letter-spacing: -0.3px;
			font-weight: 400;
			color: var(--dark-2);
			text-transform: uppercase;
			background-color: var(--light-blue-grey-1);
			&::before{
				color: #FFF;
				background-color: var(--primary-color);

			}
		}
	}
	.pxl-post--author {
		display: flex;
		align-items: center;
		gap: 28.5px;
		background-color: var(--light-green-2);
		border: 1px solid var(--light-green-2);
		border-radius: 15px;
		padding: 34px 41.5px 45px;
		margin-right: 53px;
		@media #{$max-lg} {
			margin-right: 0;
		}
		@media #{$max-xs} {
			flex-direction: column;
			justify-content: center;
			padding: 30px;
			gap: 15px;
		}
		.pxl-author--avatar {
			img {
				min-width: 132.835px;
				width: 132.835px;
				height: 132.514px;
				border-radius: 132px;
			}
		}
		.pxl-author--name {
			@extend .h3;
			margin-bottom: 18px;
			color: var(--primary-color);
			a {
				color: inherit
			}
			@media #{$max-xs} {
				text-align: center;
			}
		}
		.pxl-author--desc {
			@extend .pxl-text6;
			color: var(--text-1);
			margin-bottom: 20px;
			@media #{$max-xs} {
				text-align: center;
				margin-bottom: 10px;
			}
		}
		.pxl-author-socials {
			display: flex;
			margin-inline: -10px;
			a {
				color: var(--primary-color);
				font-size: 14px;
				padding-inline: 10px;
				background-color: transparent;
				&:hover {
					scale: 1.3;
					color: var(--secondary-color);
				}
			}
			@media #{$max-xs} {
				justify-content: center;
			}
		}
	}
}

// Comment
#comments {
	.comment-heading, #reply-title {
		color: var(--dark-2);
		position: relative;
		padding-bottom: 13px;
		margin-bottom: 47px;
		@extend .h7;
		&::before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 53.713px;
			height: 3px;
			background-color: var(--primary-color);
			border-radius: 2px;
		}
		@media #{$max-xs} {
			font-size: 28px;
		}
		@media #{$max-3xs} {
			font-size: 26px;
		}
	}
	#reply-title {
		padding-bottom: 18px;
		margin-bottom: 29px;
	}
	.comment-list-wrap {
		margin-bottom: 93px;
		.comment-list {
			.comment {
				+ .comment {
					margin-top: 70px;
				}
				@media #{$max-sm} {
					+ .comment {
						margin-top: 50px;
					}
				}
				@media #{$max-xs} {
					+ .comment {
						margin-top: 30px;
					}
				}
			}
			.children {
				margin-top: 70px;
				padding-left: 96px;
				.comment {
					+ .comment {
						margin-top: 70px;
					}
				}
				@media #{$max-sm} {
					padding-left: 50px;
					margin-top: 50px;
					.comment {
						+ .comment {
							margin-top: 50px;
						}
					}
				}
				@media #{$max-xs} {
					padding-left: 30px;
					margin-top: 30px;
					.comment {
						+ .comment {
							margin-top: 30px;
						}
					}
				}
			}
			.comment-inner {
				display: inline-flex;
				gap: 30px;
				@media #{$max-xs} {
					gap: 15px;
				}
			}
			.comment-image {
				img {
					min-width: 99px;
					width: 99px;
					height: 99px;
					border-radius: 99px;
				}
				@media #{$max-xs} {
					img {
						min-width: 80px;
						width: 80px;
						height: 80px;
					}
				}
			}
			.comment-holder {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				column-gap: 42px;
				row-gap: 5px;
				margin-bottom: 12px;
			}
			.comment-title {
				color: var(--dark-2);
				@media #{$max-xs} {
					font-size: 16px;
				}
			}
			.comment-date {
				@extend .pxl-text6;
				color: var(--primary-color);
				text-transform: uppercase;
				@media #{$max-xs} {
					font-size: 14px;
				}
			}
			.comment-text {
				@extend .pxl-text6;
				margin-bottom: 20px;
				max-width: 582px;
				@media #{$max-sm} {
					margin-bottom: 10px;
				}
				@media #{$max-xs} {
					font-size: 14px;
				}
			}
			.comment-reply {
				@extend .pxl-text6;
				text-transform: uppercase;
				color: var(--primary-color);
				a {
					color: inherit;
					&:hover {
						color: var(--secondary-color);
					}
				}
			}
		}
	}
	.comment-respond {
		margin-top: 15px;
		.comment-reply-title {
			position: relative;
			display: inline-flex;
			align-items: center;
			gap: 15px;
			small a {
				font-size: 15px;
				width: 30px;
				min-width: 30px;
				height: 30px;
				@extend .pxl-dflex-center;
				border: 1px solid var(--secondary-color);
				color: var(--secondary-color);
				border-radius: 100px;
			}
		}
		#commentform {
			max-width: 808px;
			@media #{$max-lg} {
				max-width: none;
			}
			.logged-in-as {
				margin-bottom: 15px;
				@extend .pxl-text6;
			}
			input, textarea {
				line-height: 56px;
				border-radius: 6px;
				border: 1px solid var(--boarder-grey-1);
				background: var(--white);
				@extend .pxl-text6;
				color: var(--text-1);
				padding-inline: 27px 15px;
				&:focus {
					border-color: var(--primary-color);
				}
			}
			
			.comment-form-group {
				display: flex;
				align-items: center;
				gap: 34px;
				@media #{$max-xs} {
					gap: 20px;
				}
				@media #{$max-xsx} {
					flex-wrap: wrap;
				}
			}
			.comment-item {
				width: 100%;
				max-width: 50%;
				@media #{$max-xsx} {
					max-width: 100%;
				}
			}
			.comment-note {
				margin-bottom: 24px;
				@extend .pxl-text6;
			}
			.comment-form-cookies-consent {
				font-size: 14px;
				margin-block: 10px 28px;
				@extend .pxl-text6;
			}
			.comment-form-comment {
				width: 100%;
				margin-bottom: 28px;
				textarea {
					line-height: 1.4;
					padding: 20px 20px 20px 26px;
					height: 138px;
				}
			}
		} 
	}
}




.pxl-pagination {
	margin-top: 82px;
	.pxl-pagination-links {
		@extend .pxl-dflex-center;
		width: 100%;
		gap: 13px
	}
}
.page-numbers {
	@extend .pxl-dflex-center;
	width: 45px;
	height: 45px;
	border-radius: 45px;
	@extend .pxl-text6;
	color: var(--text-1);
	svg path {
		transition: fill .25s linear;
	}
	&.current, &:hover {
		background-color: var(--primary-color);
		color: #FFF;
		@include box-shadow(0px 0px 10px 0px rgba(23, 23, 23, 0.15));
		svg path {
			fill: #FFF;
		}
	}
}

.page-links {
    margin-top: 24px;
    clear: left;
    .post-page-numbers {
        width: 36px;
        height: 36px;
        background-color: #fff;
        line-height: 36px;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        display: inline-block;
        margin: 15px 15px 0 0;
        color: #080808;
        position: relative;
        z-index: 1;
        padding: 0;
        border: 1px solid #e9e9e9;
        @include border-radius(0px);
        &.current, &:hover {
            color: #fff;
            border-color: $primary_color;
            background-color: $primary_color;
        }
    }
}

.pxl-post-row {
	padding-top: 4px;
	margin-bottom: -56px;
	> div {
		margin-bottom: 30px;
		> p {
			margin-bottom: 0 !important;
		}
	}
}

.pxl-content-wrap.no-sidebar {
	.pxl-content-top {
		max-width: 860px;
		margin-left: auto;
  		margin-right: auto;
	}
}

