:root {
  /* Color system */
  --color-text: #000000;
  --body-background: #000000;
  --border-radius: 10px;
  --primary-color: #90cc2f;
  --color-text-inverse: #FFFFFF;
}

html,
body {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
}

body {
	background: var(--body-background);
	color: #FFFFFF;
}

#header {
	background: var(--body-background);
}

#footer {
	border-top:1px solid #FFFFFF;
	background: var(--body-background);
}
a {
	text-decoration:none;
	transition: all 0.3s ease;
}


#navbar {
	a {
		color:var(--color-text-inverse);
		text-transform: uppercase;
	}
}

.container-fluid {
	padding-right: 26px;
	padding-left: 26px;
}

.page-gallery {
	width: 100%;
	height: 85vh;

	.page-splide {
		width: 100%;
		height: 100%;
	}
	.page-splide .splide__track {
		width: 100%;
		height: 100%;
	}
	.page-splide .splide__slide {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		position:relative;
	}

	.overlay-black {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;

		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95%);
	}

	.overlay-content {
		position:absolute;
		bottom:0;
		left:0;
		color: var(--color-text-inverse);
	}
}

.grid-filters {
	text-align:right;
	padding: 10px 0 60px 0;

	.btnfilter {
		color: var(--color-text-inverse);
		border:1px solid var(--color-text-inverse);
		padding:6px 12px;
		border-radius:50px;
		margin-left:6px;
		text-transform: uppercase;
	}
	.btnfilter:hover {
		background:var(--primary-color);
		border-color:var(--primary-color);
	}
}

.grid-products {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    grid-auto-flow: dense;

	.item {
		aspect-ratio: 0.82;
		background: var(--color-text-inverse);
		border-radius: var(--border-radius);
		padding: var(--border-radius);
		transition: transform 0.3s ease;

		a {
			color:var(--color-text);
		}

		.product-info {


			.price {
				color:var(--primary-color);
				font-weight:700;
			}
		}

	}
	.item.large {
		grid-column: span 2;
		grid-row: span 2;
	}

	.item:hover {
		transform: scale(0.98);
	}

}