* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: arial;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.disable-scroll {
	overflow: hidden;
}

/*  */
/*  */ /*  */
/* MOBILE STYLES */
/*  */ /*  */ /*  */

header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	background-color: transparent;
	height: 110px;
	margin: 1rem;
}

.logo {
	display: flex;
	flex-direction: column;
	justify-items: center;
	align-items: center;
}

nav {
	display: flex;
	flex-direction: column;
	height: 100dvh;
	width: 100%;
	justify-content: flex-start;
	align-items: center;
}

.nav-items {
	list-style: none;
	margin: 3rem auto;
}

.nav-items > li {
	padding: 2rem;
	margin: 4rem auto;
	font-weight: 600;
	font-size: 1.5rem;
}

a {
	text-decoration: none;
	color: black;
}

.burger {
	border: none;
	background-color: transparent;
	font-size: 1.5rem;
	cursor: pointer;
}

.cross {
	border: none;
	background-color: transparent;
	font-size: 1.5rem;
}

/*  */
/*  */ /*  */
/* IMAGE GALLERY */
/*  */ /*  */ /*  */

.grid-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	gap: 0.4rem;
	margin: 0 0.5rem 2rem 0.5rem;
}

.grid-wrapper > div,
img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	cursor: pointer;
}

.hero {
	grid-column: 1 / 3;
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 10px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

/* Heart Icon Styling */
.heart-container {
	position: absolute;
	bottom: 15px;
	right: 15px;
	width: 24px;
	height: 24px;
	z-index: 2;
	cursor: pointer;
}

.heart-icon {
	width: 100%;
	height: 100%;
	fill: transparent;
	stroke: white;
	stroke-width: 1;
	transition: all 0.3s ease;
	filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.5));
}

.heart-icon:hover {
	transform: scale(1.1);
}

.heart-icon.liked {
	fill: #e51c1c;
	stroke: #e51c1c;
}

/*  */
/*  */ /*  */
/* FOOTER */
/*  */ /*  */ /*  */

footer {
	border-top: solid 1px black;
	display: flex;
	flex-direction: column;
	margin: auto 0 0 0;
	justify-content: flex-start;
	align-items: center;
	min-height: 150px;
}

.socials {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	width: 100%;
	padding: 10px;
}

.icons {
	font-size: 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
	display: inline-block;
	vertical-align: middle;
}

.attributions {
	text-align: center;
	margin-top: auto;
	font-size: 12px;
}

.hidden {
	display: none;
}

.hidden-btns {
	visibility: hidden;
}

.github {
	& a {
		text-decoration: underline;
	}
}

/* CONSENT BANNER */
/*  */ /*  */ /*  */
/*  */ /*  */ /*  */
.consent-banner {
	position: fixed;
	height: 100vh;
	width: 100vw;
	background: rgba(0, 0, 0, 0.9);
	color: white;
	padding: 1rem;
	z-index: 1000;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.consent-content {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;

	& a {
		color: #9c9b9b;
		text-decoration: underline;
		font-size: 0.75rem;
	}
}

.consent-content p {
	margin: 0;
	flex: 1;
	min-width: 250px;
	font-size: 0.9rem;
	line-height: 1.4;
}

.consent-buttons {
	display: flex;
	gap: 1rem;
}

.consent-btn {
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
	transition: background-color 0.3s;
}

#accept-consent {
	background-color: #4caf50;
	border: 1px solid #4caf50;
	color: white;
}

#accept-consent:hover {
	background-color: #3e8e41;
}

#decline-consent {
	background-color: transparent;
	border: 1px solid #f44336;
	color: white;
}

#decline-consent:hover {
	background-color: #d32f2f;
}

/*  */ /*  */ /*  */ /*  */
/*  */ /*  */ /*  */ /*  */
/*  */ /*  */ /*  */ /*  */
/*  */ /*  */ /*  */ /*  */
/* MEDIA QUERIES */

/*  */ /*  */ /*  */
/* TABLETS */
/*  */ /*  */ /*  */

@media screen and (min-width: 600px) {
	.grid-wrapper {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: auto;
		gap: 1rem;
	}

	.hero {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}

	.img1 {
		grid-column: 3 / 5;
	}

	.img2 {
		grid-column: 5 / 7;
	}

	.img3 {
		grid-column: 3 / 5;
		grid-row: 3 / 4;
	}

	.img4 {
		grid-column: 5 / 7;
		grid-row: 3 / 4;
	}

	.img5 {
		grid-column: 5 / 6;
	}
	.img6 {
		grid-column: 6 / 7;
	}

	.img7 {
		grid-column: 1 / 3;
		grid-row: 2 / 3;
	}

	.img8 {
		grid-column: 3 / 5;
		grid-row: 2 / 3;
	}

	.img9 {
		grid-column: 1 / 2;
		grid-row: 3 / 4;
	}

	.img10 {
		grid-column: 2 / 3;
		grid-row: 3 / 4;
	}

	.img11 {
		grid-column: 1 / 3;
	}

	.img12 {
		grid-column: 3 / 5;
	}

	.img13 {
		grid-column: 5 / 7;
	}

	.img14 {
		grid-column: 1 / 3;
	}

	.img15 {
		grid-column: 3 / 5;
	}

	.img16 {
		grid-column: 5 / 7;
	}

	.img17 {
		grid-column: 1 / 2;
	}
	.img18 {
		grid-column: 2 / 3;
	}
	.img19 {
		grid-column: 3 / 5;
	}
	.img20 {
		grid-column: 5 / 7;
	}
	.img21 {
		grid-column: 1 / 3;
	}
	.img22 {
		grid-column: 3 / 5;
	}

	.burger {
		display: none;
	}

	header {
		display: flex;
		justify-content: space-between;
		height: 200px;
		margin: 1rem;
	}

	nav {
		display: flex;
		flex-direction: row;
		height: 200px;
	}

	#desktop-menu {
		display: inline;
		width: 70%;
		text-align: end;

		& li {
			list-style: none;
			text-decoration: none;
			display: inline;
			margin: 0 1rem 0 1rem;
		}
	}

	.consent-content {
		gap: 2rem;
	}

	.consent-content p {
		font-size: 1rem;
		line-height: 1.4;
	}

	.consent-buttons {
		gap: 1.4rem;
	}
}

/*  */ /*  */ /*  */ /*  */ /*  */
/* DESKTOPS & LARGE SCREENS */
/*  */ /*  */ /*  */ /*  */ /*  */

@media screen and (min-width: 1200px) {
	.logo {
		width: 17rem;
		height: 6rem;
	}
	h1 {
		font-size: 2.5rem;
	}
	.grid-wrapper {
		margin: 3rem;
	}

	header {
		margin: 1rem 3rem 0 3rem;

		& li {
			font-size: 1.1rem;
			font-weight: 100;
			padding: 0.2rem;
		}

		& li:hover {
			cursor: pointer;
			background: rgba(108, 1, 85, 0.135);
			transition: all 0.2s ease-in-out;
			border-radius: 5px;
		}
	}

	.visuals-by {
		font-size: 1.3rem;
	}

	.francesca-buccione {
		font-family: "Mrs Saint Delafield", cursive;
		font-weight: 400;
		font-style: normal;
		font-size: 3rem;
	}

	.desktop-nav-items {
		padding: none;
	}

	div:has(> img[data-gallery]):hover {
		transition: all 0.2s ease-in-out;
		cursor: pointer;
		transform: scale(1.03);
	}
}