.black-friday {
	h1, h2, h3 {
		color: var(--color-black);
	}

	.category-container {
		background-color: var(--color-black);
		position: relative;

		a:hover img {
			transform: scale(1.05);
			transition: all 0.3s;
		}
	}
	.category-container::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image: url('images/black-friday-texture.png');
		background-repeat: repeat;
		opacity: 0.55;
		pointer-events: none;
	}
	.category-containter > * {
		position: relative;
	}
	.category-container .container-content {
		h2 {
			color: var(--color-accent-dark);
		}
		p { 
			color: var(--color-white);
		}
		a.cta {
			background-color: var(--color-accent-dark);
			color: var(--color-black);
			box-shadow: none;
			font-weight: 600;
			text-transform: uppercase;
		}
		a.cta:hover {
			background-color: var(--color-white);
			color: var(--color-black);
		}
		a h2:hover {
			color: var(--color-white);
		}
	}
	.image-grid a:hover .overlay {
		background-color: var(--color-black);
		opacity: 1;
	}
	.image-grid a:hover .overlay .title {
		color: var(--color-accent-dark);
	}
	.image-grid a:hover .overlay .icon {
		background-color: var(--color-accent-dark);
	}
	.section-title {
		background-color: var(--color-black);
		
		p {
			color: var(--color-accent-dark);
		}
	}
	.section-nav {
		border-bottom: 2px solid var(--color-black);

		ul li a {
			color: var(--color-black);
		}
		ul li.active a {
			border-bottom-color: var(--color-black);
		}
	}
}