@charset 'UTF-8';

/* COLORS
================================================ */
:root {
	--text: #333;
	--bg: #fff;
	--video-opacity: .5;
}
@media (prefers-color-scheme: dark) {
	:root {
	--text: #ddd;
	--bg: #000;
	--video-opacity: .7;
	}
}

/* GENERAL STYLING
================================================ */
body {
	color:#ffffff;	/* color: var(--text); */
	background:#000000; /* background: var(--bg); */
	font-family:'Bree Serif', sans-serif;
	transition:.5s;
}

/* COMMON
================================================ */
p {
	line-height:1.8; /* 1.8 */
}
img {
	max-width:100%;
}
a:hover {
	color:#f5b090; /* 0bd; */
}

/* HEADER
================================================ */
header {
	position:relative;
	margin-bottom:.5rem;
}
.header-text {
	position:absolute;
	top:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	z-index:2;
	text-align:center;
}
.header-title {
	font-size:2rem;
}
.header-name {
	font-size:4rem;
	margin-bottom:1rem;
}
.header-link {
	font-size: 1.25rem;
}
.header-pattern {
	position: absolute;
	z-index: 1;
	background-size: auto auto;
	background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--bg) 2px, var(--bg) 4px );
}
header video {
	object-fit: cover;
	object-position: center top;
	opacity: var(--video-opacity);
}
.header-text,
.header-pattern,
header video {
	width: 100vw;
	height: 90vh;
}

/* GRID
================================================ */
.grid {
	width:94vw;
	margin:0 auto 3vw;
	display:grid;
	gap:2vw;
	grid-template-columns:repeat(3,30vw); /* (94-2*2)/3 */
	grid-template-rows:repeat(5,30vw);
}
.grid-item {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
.grid-item:hover {	/* this item is added */
	box-shadow:0 0 2rem rgba(0, 0, 0, .5);
	transform:scale(1.02);
	z-index:3;
	position:relative;
}
.img-item {  /* this item is added */
	object-fit:cover;
	object-position:center;
}
.img-item:hover {	/* this item is added */
	box-shadow:0 0 2rem rgba(0, 0, 0, .5);
	transform:scale(1.02);
	z-index:3;
	position:relative;
}
.grid-big-top {
	grid-column:1/3;
	grid-row:2/3;
}
.grid-big-bottom {
	grid-column:2/4;
	grid-row:4/5;
}

/* FOOTER
================================================ */
footer {
	text-align:center;
	padding-bottom:3rem;
}
.footer-link {
	margin-bottom:.5rem;
}

/* LIGHTBOX LUMINOUS
================================================ */
.lum-lightbox.lum-open {
	z-index:4;
}
.lum-lightbox-inner img {
	max-width:120vw;
	max-height:80vh;
}

/* DESKTOP SIZE
================================================ */
@media (min-width: 767px) {
/* Header */
.header-name {
	font-size:5rem;
}

/* Grid */
.grid {
	width:94vw; /* 80vw */
	gap:1vw; /* 1vw */
	grid-template-columns:repeat(5,18vw); /* repeat(3,26vw) *//* (80-2)/3 */
	grid-template-rows:repeat(3,18vw); /* repeat(5,26vw) */
}
.grid-big-top {
	grid-column:4/6;
	grid-row:1/2;
}
.grid-big-bottom {
	grid-column:1/3; /* 2/4 */
	grid-row:3/4; /* 4/5 */
}
.grid-item {
	transition:.3s; /* .3s */
}
.grid-item:hover {
	box-shadow:0 0 2rem rgba(0, 0, 0, .5); /* 0 0 2rem rgba(0, 0, 0, .5) */
	transform:scale(1.02); /* scale(1.02) */
	z-index:3; /* 3 */
	position:relative; /* relative */
}

.img-item {
	transition:.3s; /* .3s */
}
.img-item:hover {
	box-shadow:0 0 2rem rgba(0, 0, 0, .5); /* 0 0 2rem rgba(0, 0, 0, .5) */
	transform:scale(1.02); /* scale(1.02) */
	z-index:3; /* 3 */
	position:relative; /* relative */
}

}
}