body {
	background-color: #FFF;
}

main {
	padding-top: var(--main-header-cat-height);
	background-color: #FFF;
}

.sector-grid {
	max-width: 3000px;
	margin: auto;
	display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 500px;
    gap: 10px 10px;
    grid-template-areas: ". . .";
}
	.sector-grid-items {
		background-color: #000;
		position: relative;
	}

.sector-box {
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	transition: transform 0.5s;
	transform: scale(1);
	overflow: hidden;
	color: #FFF;
}

	.bg-image {
		top: 0px;
		left: 0px;
		position: absolute;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: cover;
		 background-color: black; /* fallback color */
		 background-position: center;
		 overflow: hidden;
		transition: all .5s;
	}
		.bg-image::after {
			content: "";
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(255,255,255,1);
			opacity: 0.2;
			transition: all .5s;
		}
		.sector-box:hover .bg-image, .sector-box:focus .bg-image {
			transform: scale(1.2);
		}
		.sector-box:hover .bg-image::after, .sector-box:focus .bg-image::after {
			opacity: 0.6;
		}
		
		.bg-text {
			top: 0px;
			left: 0px;
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			font-size: 0.9rem;
			letter-spacing: 0.4rem;
			text-align: center;
		}
			.bg-text span {
				/*
				padding-left: 1rem;
				padding-right: 1rem;
				background-color: #000;
				*/
background-color: white;
    padding: 1rem 1.5rem 1rem 1.5rem;
			}
	.fancy-hidden {
		display: none;
	}



@media (max-width: 992px) {
	.sector-grid {
		grid-template-areas: ". .";
		grid-auto-rows: 300px;
		gap: 5px 5px;
	}
	.bg-text {
		font-size: 0.9rem;
		letter-spacing: 0.3rem;
	}
}