section[class*="-cat-section"] {
	text-align: center;

	.cat-grid {
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		margin-left: -1%;
		margin-right: -1%;

		.item {
			width: 23%;
			margin-left: 1%;
			margin-right: 1%;
			margin-bottom: 60px;
		}//.item

	}//.cat-grid

	.button-wrap {

		.btn-readmore {
			font-size: 0.7em;
			display: inline-block;
			letter-spacing: 1px;
			font-weight: 700;
			background: $black_color;
			color: $white_color;
			padding: 15px 30px;

			&:hover {
				background: $primary_color;
				color: $black_color
			}
			
		}//.btn-readmore

	}//.button-wrap

	&.style-three {

		.container {
			display: flex;
			flex: 1;
			flex-wrap: wrap;
		}//.container

		.cat-wrap, .button-wrap {
			width: 100%;
		}//.cat-wrap

		.cat-feature {
			width: 50%;
			position: relative;
			margin-bottom: 40px;

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

			.product-title-wrap {
				position: absolute;
				top: 0;
				left: 0;
				background: rgba($black_color, 0.3);
				height: 100%;
				width: 100%;
				display: flex;
				flex-direction: column;
				flex: 1;
				justify-content: center;
				align-items: center;
				text-align: center;
				padding: 50px;

				.cat-wrap {
					display: flex;
					flex-direction: column-reverse;
				}//.cat-wrap

				.pp-title {
					margin-top: 0;
					margin-bottom: 0;
					color: $white_color;
					text-shadow: 0 1px 2px rgba($black_color, 0.16);
					font-size: 2.8em;
					font-family: $secondary_font;
					line-height: 1.5;
				}//.rp-title

				.pp-desc {
					font-size: 0.7em;
					color: $white_color;
					font-weight: 700;
					letter-spacing: 1px;

					p {
						margin-top: 0;
						margin-bottom: 20px;
						
						&:last-child {
							margin-bottom: 0;
						}

					}

				}//.rp-desc

				.button-wrap {
					margin-top: 25px;

					.btn-readmore {
						background: none;
						font-size: 0.7em;
						text-transform: uppercase;
						font-weight: 700;
						color: $white_color;
						letter-spacing: 1px;
						display: inline-block;
						border: 1px solid;
						padding: 15px 30px;

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

				}//.button-wrap

			}//.product-title-wrap

		}//.cat-feature

		.cat-grid {
			width: 50%;
			margin-left: 0;
			margin-right: 0;

			.cat-slider {
				display: flex;
				flex: 1;
				flex-wrap: wrap;
			}//.cat-slider

			.item {
				width: 46%;
				margin-left: 4%;
				margin-right: 0;
				margin-bottom: 40px;
			}//.item

		}//.cat-grid

	}//&.style-three

}//section[class*="-cat-section"]

@include media(sm) {

	section[class*="-cat-section"] {

		.cat-grid {
			overflow: hidden;
			
			.item {
				width: 48%;
			}//.item

		}//.cat-grid

		.button-wrap {
			margin-top: 0;
		}

		&.style-three {

			.cat-feature {
				min-height: 400px;
			}//.cat-feature

			.cat-grid {

				.item {
					width: 48%;
					margin-left: 0;
					margin-right: 4%;

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

				}//.item

			}//.cat-grid

		}

		&.style-three {

			.container {
				flex-direction: column;
			}//.container

			.cat-feature {
				width: 100%;
				margin-bottom: 40px;
			}//.cat-feature

			.cat-grid {
				width: 100%;
			}//.cat-grid

		}//&.style-three

	}//section[class*="-cat-section"]

}//media(sm)

@include media(xs) {
	
	section[class*="-cat-section"] {

		.cat-grid {
			margin-left: 0;
			margin-right: 0;
			flex-direction: column;

			.item {
				width: 100%;
				margin-left: 0;
				margin-right: 0;
			}//.item

		}//.cat-grid

		&.style-three {

			.cat-feature {
				min-height: 350px;
			}//.cat-feature

			.cat-grid {
				margin-top: 20px;
			}

		}

		&.style-three {

			.container {
				flex-direction: column;
			}//.container

			.cat-feature {

				.product-title-wrap {
					padding: 20px;

					.pp-title {
						font-size: 1.6em;
						line-height: 1.3;
					}//.rp-title

					.button-wrap {
						margin-top: 20px;

						.btn-readmore {
							font-size: 0.6em;
							padding: 10px 20px;
						}//.btn-readmore

					}//.button-wrap

				}//.product-title-wrap

			}//.cat-feature

			.cat-grid {

				.cat-slider {
					flex-direction: column;
				}//.cat-slider

				.item {
					width: 100%;
					margin-left: 0;

					&:last-child {
						margin-bottom: 0;
					}

				}//.item

			}//.cat-grid

		}//&.style-three

	}//section[class*="-cat-section"]

}//media(xs)