@use "mixins/mixins-master" as *;
@use "mixins/flex" as *;
@use "variables" as *;
.thim-sc-post-block-1 {
	.row {
		margin-left: -15px;
		margin-right: -15px;
		.item {
			padding-left: 15px;
			padding-right: 15px;
			@media (min-width: 1520px) {
				height: 479px;
			}
			@media (max-width: 1510px) and (min-width: 1440px) {
				height: 500px;
			}
			.inner-item {
				padding-bottom: 20px;
				margin-bottom: 30px;
				position: relative;
				background: #fff;
				overflow: hidden;
				border-radius: $thim_border_radius;
				height: 100%;
				.thumbnail {
					position: relative;
					&:before {
						content: "";
						bottom: 0px;
						left: 0px;
						width: 100%;
						height: 100%;
						z-index: 1;
						display: block;
						position: absolute;
						@include background-gradient(rgba(255, 255, 255, 0), rgba(68, 68, 68, 0.8));
					}
					img {
						// padding: 5px;
						width: 100%;
						height: auto;
					}
					.cat-post {
						position: absolute;
						bottom: 10px;
						// height: 37px;
						z-index: 2;
						padding: 10px;
						left: 10px;
						right: auto;
						color: $thim_body_primary_color;
						// text-transform: uppercase;
						background-color: #fff;
						font-size: 16px;
						border-radius: 4px;
					}
				}
				.information {
					position: absolute;
					@include opacity(0);
					background-color: #fff;
					left: 0;
					bottom: 0;
					right: 0;
					z-index: 10;
					top: 0;
					padding: 47px 35px 48px 40px;
					overflow: auto;
					@include transition(0.3s ease-in-out);
					@include box-shadow(12.9px 15.3px 18px 0 rgba(0, 0, 0, 0.08));
					.date {
						font-size: 16px;
						font-weight: 500;
						margin-bottom: 20px;
						text-transform: uppercase;
						letter-spacing: 0.4px;
						color: #949390;
					}
					.data-meta {
						padding-bottom: 20px;
						margin-bottom: 30px;
						padding-top: 12px;

						.tag {
							display: none;
						}
					}
					.content-post {
						font-size: 16px;
						margin-bottom: 60px;
						line-height: 26px;
						position: relative;
						letter-spacing: 0.3px;
						&:before {
							content: "";
							width: 45px;
							height: 1px;
							top: -30px;
							position: absolute;
							border: 1px solid #e7e7e7;
						}
					}
					.author-post {
						display: inline-block;
						.avatar {
							margin-right: 9px;
							float: left;
							img {
								@include rounded(50%);
								aspect-ratio: 1 / 1;
							}
						}
						.author {
							float: left;
							margin-top: 5px;
							line-height: 1.4;
							text-transform: capitalize;
							.description {
								margin-top: 3px;
								font-size: 14px;
								margin-bottom: 0;
								// font-style: italic;
								letter-spacing: 0.3px;
								text-align: left;
							}
							.author-name {
								font-weight: 500;
							}
						}
					}
				}
				.sub-content {
					padding-left: 20px;
					padding-top: 20px;
					padding-right: 20px;
					.tag {
						display: none;
					}
					.title {
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 16px;
					}
				}
				&:hover {
					.information {
						@include opacity(1);
					}
				}
				.title {
					// text-transform: uppercase;
					font-size: 20px;
					line-height: 1.5;
					text-align: left;
					font-weight: 500;
					margin-bottom: 0;
				}
				.data-meta {
					font-size: 16px;
					padding-top: 10px;
					a {
						color: $thim_font_body_color;
					}
				}
			}
		}
	}
}