.featured-section {
	
	.container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: [row1-start] auto [row2-start] auto;
		grid-gap: 30px;
		align-items: flex-start;
		max-width: 100%;
		padding-left: 4%;
		padding-right: 4%;

		&:before, 
		&:after {
			display: none;
		}
	}//.container

	.section-block{
		position: relative;

		&:first-child {
			grid-column: 1 / span 2;
			grid-row: 1 / span 2;

			.block-content {
				padding: 100px;
			}

			.block-title {
				margin: 0;
				font-size: 2.8em;
				max-width: 480px;
				font-style: italic;
				text-shadow: 0 1px 2px rgba($black_color, 0.16);

				a {
					display: inline-block;
					color: $white_color;
				}
			}//.block-title

			.btn-readmore {
				display: inline-block;
				margin-top: 30px;
				font-size: 0.7em;
				letter-spacing: 1px;
				color: $white_color;
				font-weight: 700;
				border: 1px solid $white_color;
				text-align: center;
				padding: 15px 30px;

				&:hover {
					background: $white_color;
					color: $black_color;
				}
			}//.btn-readmore
		}//&:first-child

		&:nth-child(4) {
			grid-column: 3 / span 2;
			grid-row: 2;
		}

		&:not(:first-child) {

			.block-title {
				margin: 0;
				font-size: 1.2em;

				a {
					display: inline-block;
					color: $black_color;
					background: rgba($white_color, 0.9);
					padding: 15px 20px;

					&:hover {
						background: $primary_color;
					}
				}
			}//.block-title
		}//&:not(:first-child)

		.block-img {
			width: 100%;
			height: 100%;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}//.block-img

		.block-content {
			position: absolute;
			top: 0;
			left: 0;
			background: rgba($black_color, 0.3);
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			padding: 40px;
			justify-content: flex-end;
			align-items: flex-start;
			flex: 1;
		}//.block-content
	}//.section-block

	&.feat_cat[class*="style-"] {

		.section-block {
			
			&:first-child {

				.block-title {
					font-style: normal;
				}//.block-title

			}//&:first-child

			.block-content {
				background: rgba(0, 0, 0, 0.3) !important;
				padding: 20px;

				.block-title {
					font-size: 1em;
					letter-spacing: 1px;

					a {
						background: none;
						color: $white_color;
						padding: 0;
						margin-bottom: 10px;

						&:hover {
							background: none;
						}

					}//a

				}//.block-title

				.product-sale-count {

					> span {
						display: inline-block;
						font-weight: 700;
						color: $white_color;
						margin-top: 10px;
						margin-left: 5px;
						margin-right: 5px;
						position: relative;
						padding-top: 35px;
						min-width: 90px;
						text-align: center;

						.item-texts {
							position: absolute;
							background: $white_color;
							color: $black_color;
							z-index: 2;
							font-weight: 600;
							text-transform: uppercase;
							font-size: 0.6em;
							letter-spacing: 0.5px;
							min-height: 30px;
							padding: 0 10px;
							display: flex;
							flex: 1;
							justify-content: center;
							flex-direction: column;
							text-align: center;
							top: 0;
							left: 0;
							width: 90px;

							&::after {
								content: "";
								border-top: 7px solid $white_color;
								border-left: 7px solid transparent;
								border-right: 7px solid transparent;
								position: absolute;
								bottom: -7px;
								width: 0;
								height: 0;
								margin: 0 auto;
								left: 0;
								right: 0;
							}

						}//.item-texts

					}//span

				}//.product-sale-count

			}//.block-content

		}//.section-block

		&.style-five, &.style-six {

			.section-block {

				&:first-child {

					.block-inner-content {
						background: none;
						padding: 0;
					}//.block-inner-content

				}//&:first-child

			}//.section-block

		}//&.style-five

	}//&.feat_cat

	&.style-one {

		.container {
			display: flex;
			flex: 1;
			flex-wrap: wrap;
			grid-gap: 0;
			grid-template-columns: auto;
			grid-template-rows: auto;
			max-width: 1220px;
			padding-left: 0;
			padding-right: 0;
		}//.container

		.section-block {
			width: 31.33%;
			margin-right: 3%;

			&:nth-child(3n) {
				margin-right: 0;
			}//&:nth-child(3n)

			.block-content {
				background: none;
				justify-content: center;
				align-items: center;
				padding: 30px;

				.block-title {
					text-shadow: none;
					font-size: 0.7em;
					letter-spacing: 1px;
					font-weight: 700;
					max-width: 100%;
					box-shadow: none;
					font-style: normal;
					text-transform: uppercase;

					a {
						color: $black_color;
						background: $white_color;
						padding: 20px 35px;

						&:hover {
							color: $white_color;
							background: $secondary_color;
						}

					}//a

					span {
						display: inline-block;
						color: $black_color;
						background: $white_color;
						padding: 20px 35px;
					}

				}//.block-title

			}//.block-content
			
		}//.section-block

	}//&.style-one
}//.featured-section

@include media(xl) {
	.featured-section {
		
		.section-block {
			
			&:first-child {
				
				.block-content {
					padding: 40px;
				}//.block-content
			}//&:first-child

			.block-content {
				padding: 20px;
			}//.block-content
		}//.section-block
	}//.featured-section
}//media(xl)

@include media(lg) {
	.featured-section {
		
		&.style-one {

			.container {
				max-width: 1170px;
			}//.container
		}
	}
}//media(lg)

@include media(md) {
	.featured-section {
		
		&.style-one {

			.container {
				max-width: 1000px;
			}//.container
		}//&.style-five, &.style-six
	}
}//media(md)

@include media(sm) {
	.featured-section {
		
		.container {
			grid-template-rows: repeat(1, 1fr);
			grid-template-columns: repeat(2, 1fr);
			align-items: inherit;
		}//.container

		.section-block {
			
			&:first-child {
				grid-column: inherit;
				grid-row: inherit;

				.block-content {
					padding: 20px;
				}

				.block-title {
					font-size: 1.2em;
				}//.block-title
			}//&:first-child

			&:nth-child(4) {
				grid-column: inherit;
				grid-row: inherit;
			}

			.block-content {
				padding: 20px;
			}//.block-content
		}//.section-block

		&.style-one {
			
			.container {
				padding-left: 15px;
				padding-right: 15px;
				max-width: 768px;
			}//.container

			.section-block {
				
				.block-content {

					.block-title {

						a {
							padding: 15px 25px;
						}//a

					}//.block-title

				}//.block-content

			}//.section-block

		}//&.style-one
	}//.featured-section
}//media(sm)

@include media(xs) {
	.featured-section {
		
		.container {
			grid-template-columns: repeat(1, 1fr);
			grid-template-rows: repeat(1, 1fr);
		}//.container

		.section-block {
			
			&:first-child {
				grid-column: 1;
				grid-row: 1;

				.btn-readmore {
					margin-top: 20px;
				}//.btn-readmore
			}//&:first-child

			&:nth-child(4) {
				grid-column: 1;
				grid-row: inherit;
			}//&:nth-child(4)
		}//.section-block

		&.style-five, &.style-six {
			
			.container {
				grid-template-rows: repeat(1, 1fr);
				max-width: 420px;
			}//.container

			.section-block{

				&:first-child {

					.block-title {
						font-size: 1.2em;
					}
				}//&:first-child
				
				&:nth-child(2) {
					grid-column: 1;
				}

				&:nth-child(4) {
					grid-column: 1;
					grid-row: inherit;
				}

				.block-content {
					padding: 20px;
				}//.block-content
			}//.section-block
		}//&.style-five, &.style-six

		&.style-six {

			.container {
				max-width: 100%;
			}

		}//&.style-six

		&.style-one, 
		&.style-two, 
		&.style-three {
			
			.container {
				flex-direction: column;
				max-width: 420px;
			}//.container

			.section-block {
				width: 100%;
				margin-right: 0;
			}//.section-block
		}//&.style-three

		&.style-one {

			.section-block {
				margin-bottom: 40px;
			}//.section-block

		}//&.style-one

	}//.featured-section
}//media(xs)