@charset "UTF-8";
/* CSS Document */

/* Import custom fonts */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

@font-face {
	font-family: "apfel-grotezk";
	src: url('/Fonts/ApfelGrotezk-Regular.woff') format('woff'),
	  url('/Fonts/ApfelGrotezk-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Box-sizing reset for all elements */
*{
	box-sizing: border-box;
}

/* Responsive image sizing */
img {
	max-width: 100%;
	height: auto;
}

video { 
    position: relative;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;   
    overflow: hidden; 
} 

/* ============================================================================= */
/* Styles */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Body style*/

body {
	margin: 0 2em;
	height: 100%;
	vertical-align: top;
	font-family: "EB Garamond", serif;
	font-weight: 400;
	font-size: clamp(1rem, 0.22vi + 0.95rem, 1.13rem);
	line-height: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
	}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Paragraph styles */

h3 {
	font-weight: 700;
	font-size: clamp(1rem, 0.22vi + 0.95rem, 1.13rem);
	line-height: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
	margin-bottom: clamp(0.5rem, 0.11vi + 0.47rem, 0.56rem);
	margin-top: clamp(1.5rem, 0.33vi + 1.42rem, 1.69rem);
}

h2 {
	font-weight: 400;
	font-size: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
	line-height: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);
	margin-top: 0;
	margin-bottom: clamp(1.88rem, 1.16vi + 1.6rem, 2.53rem);
}

.h2-line {
	display: block;
	margin-bottom: clamp(1.25rem, 0.77vi + 1.07rem, 1.69rem);
	}

h1 {
	font-size: clamp(1.25rem, 0.77vi + 1.07rem, 1.69rem);
	line-height: clamp(1.88rem, 1.16vi + 1.6rem, 2.53rem);
	margin-top: 0;
	margin-bottom: 0;
}

c {
	font-size: clamp(0.8rem, -0.09vi + 0.82rem, 0.75rem);
	line-height: clamp(1.2rem, -0.13vi + 1.23rem, 1.13rem);
	margin-top: 0;
}

span.nowrap {
  white-space: nowrap ;
}

/* Remove default list styles */
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Links */

a.hidden:link, a.hidden:visited {
	text-decoration: none;
	transition: color 0.3s ease;
	color: #000000;
}

a.hidden:hover {
	color: #fcaf17;
}

a.grey:link, a.grey:visited {
	text-decoration: none;
	transition: color 0.3s ease;
	color: #999999;
}

a.grey:hover {
	color: #fcaf17;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Divider*/

.divider {
	border: none;
	border-top: 1.2px solid black;
	margin: 0 0 0.5em 0;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Nav */

nav {
	/*Text*/
	font-family: "apfel-grotezk", sans-serif;
	font-weight: normal;
	font-size: 90%;
	text-transform: uppercase;
	
	/*Layout*/
	margin: 0;
	padding: 1em 0;
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: white;
}

/* Menu */
.menu {
    display: flex;
    justify-content: space-between;
	align-items: center;
	vertical-align: middle;
}

/* Email icon */

.material-symbols-outlined {
	vertical-align: -0.2em;
}

/* Menu link styles */
.menu a {
	color: #333;
	font-weight: 400;
}

/* Menu link hover effect */
.menu a:hover {
	color: #fcaf17;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/*Work*/

.index-title-client {
	font-size: 120%;
	font-weight: 700;
	font-style: italic;
}	

.hidden .index-title-client {
	color: darkgray;
	transition: color 0.3s ease;
}

a.hidden:hover .index-title-client {
	color: #fcaf17;
}

.index-title-subtitle {
	font-size: 120%;
	font-weight: 700;
}	

.index-title-tags {
	font-family: 'apfel-grotezk', sans-serif;
}	

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/*Footer styles */

footer {
	padding: 3em 0 1em;
	bottom: 0;
	flex-shrink: 0;
	flex-grow:0;
}

/* ============================================================================= */
/* Index page */

#main-home {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-bottom: 2em;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Intro */

#index-intro {
	flex-grow: 0;
	flex-shrink: 0;
	max-width: 50%;
	margin-top: clamp(0.63rem, 0.39vi + 0.53rem, 0.84rem);
	}
	
	/* Tablet */

		@media only screen and (min-width: 768px) and (max-width: 1199px) {
	
			#index-intro {
				flex: 1;
				flex-shrink: 1;
				max-width: 85% !important;
			}
		}

	/* Mobile */

		@media only screen and (max-width: 767px) {
	
			#index-intro {
				flex: 1;
				flex-shrink: 1;
				max-width: 100% !important;
			}
		}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/*Filters*/

#index-filters {
	grid-column: 1 / span 3;
}
	.index-filters-row {
		font-family: "apfel-grotezk", sans-serif;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		font-size: 90%;
		gap: 0.5em;
		padding: 1.5em 0 0.1em 0;
	}

	.index-filters-label {
		/* margin: 0 0.2em 0 1em; */
		text-transform: uppercase;
		color: gray;
	}
	
	/* Buttons */

		.index-filters-options button {
			background-color: snow;
			font-size: 90%;
			color: gray;
			border: 1px solid gray;
			border-radius: 8px;
			padding: 0.04em 0.4em;
			cursor: pointer;
			transition: color 0.2s ease;
			letter-spacing: 0.01em;
		}

		.index-filters-options button:hover {
			color: black;
			border-color: black;
		}

		.filter-toggle.active {
			color: white;
			border-color: black;
			background-color: black;
		}

		.filter-toggle.active:hover {
  			color: white;
  			border-color: black;
  			background-color: black;
		}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Work */

#index-work {
	display: grid;
	grid-column-gap: 2em;
	grid-row-gap: 2em;
	grid-template-columns: repeat(3, 1fr);
	margin-top: clamp(1.2rem, -0.13vi + 1.23rem, 1.13rem);
}

	/* Tablet */

		@media only screen and (min-width: 768px) and (max-width: 1199px) {
	
			#index-work {
				grid-template-columns: repeat(2, 1fr);
			}
		}

	/* Mobile */

		@media only screen and (max-width: 767px) {
	
			#index-work {
				grid-template-columns: 1fr;
			}
		}

	.index-project {
    	gap: 0.5em;
  	}

	.index-project-wrapper {
		position: relative;
		overflow: hidden;
	}
	
	.index-project-link {
		display: block;
		position: relative;
	}
	
	.index-img-wrapper {
		aspect-ratio: 4 / 5;
		/*padding: 8.3%;*/
  		box-sizing: border-box;
  		display: flex;
  		align-items: center;
  		justify-content: center;
	}
	
	.index-img-wrapper img {
		width: 100%;
		height: auto;
		max-height: 100%;
		object-fit: contain;
	}

	/* Images without border */
	
	.index-img-noborder {
		background-color: transparent !important;
		padding: 0 !important;
	}
	
	.index-project-title {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #ffe8ba;
		color: black;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		opacity: 0;
		transition: opacity 0.3s ease;
		padding: 3em;
		box-sizing: border-box;
	}
	
	.index-title-tags {
		font-size: 90%;
		margin-top: 0.5em;
	}
	
	.index-project-link:hover .index-project-title {
		opacity: 1;
	}
	
/* Project background colours */
	
	/* Anne Fine series */
	
		.af-series {
			background-color: #ffdb7b;
		}

		.af-series .index-project-title {
			background-color: #ffdb7b;
		}
	
	/* BM Activities */
	
		.bm-activities {
			background-color: #435642;
		}

		.bm-activities .index-project-title {
			background-color: #435642;
			color: white;
		}
	
	/* BM Burma */
	
		.bm-burma {
			background-color: #f9af00;
		}

		.bm-burma .index-project-title {
			background-color: #f9af00;
		}
	
	/* BM Conservation */
	
		.bm-conservation .index-img {
			background-color: #435642;
		}
	
		.bm-conservation .index-project-title {
			background-color: #435642 !important;
			color: white;
		}
	
	/* BM Invite Dragon */
	
		.bm-invite-dragon {
			background-color: #a6c9df;
		}

		.bm-invite-dragon .index-project-title {
			background-color: #a6c9df;
		}
	
	/* BM Invite Rosetta */
	
		.bm-invite-rosetta {
			background-color: #7e5fac;
		}

		.bm-invite-rosetta .index-project-title {
			background-color: #7e5fac;
			color: white;
		}
	
	/* BM Hiroshige */
	
		.bm-hiroshige {
			background-color: #111f35;
		}

		.bm-hiroshige .index-project-title {
			background-color: #111f35;
			color: white;
		}
	
	/* BM Michelangelo */
	
		.bm-michelangelo {
			background-color: #7abdda;
		}

		.bm-michelangelo .index-project-title {
			background-color: #7abdda;
		}
	
	/* BM Remus */
	
		.bm-remus {
			background-color: #111f35;
		}

		.bm-remus .index-project-title {
			background-color: #111f35;
			color: white;
		}
	
	/* BM Trips */
	
		.bm-trips {
			background-color: #7e5fac;
		}

		.bm-trips .index-project-title {
			background-color: #7e5fac;
			color: white;
		}
	
	/* Budapest */

		.budapest {
			background-color: #3B4151;
		}

		.budapest .index-project-title {
			background-color: #3B4151;
			color: white;
		}

	/* Children's shoes */
	
		.childrens-shoes {
			background-color: #92c078;
		}

		.childrens-shoes .index-project-title {
			background-color: #92c078;
		}
	
	/* Christmas shopping */
	
		.christmas-shopping {
			background-color: #e50150;
		}

		.christmas-shopping .index-project-title {
			background-color: #e50150;
			color: white;
		}

	/* Eunice Newton Foote */
	
		.eunice-newton-foote {
			background-color: #8cbd1e;
		}
	
		.eunice-newton-foote .index-project-title {
			background-color: #8cbd1e !important;
		}
	
	/* Monthly bundle */
	
		.monthly-bundle {
			background-color: #416c77;
		}

		.monthly-bundle .index-project-title {
			background-color: #416c77;
			color: white;
		}
	
	/* Picnic drama */

		.picnic-drama {
			background-color: #b9cb5d;
		}

		.picnic-drama .index-project-title {
			background-color: #b9cb5d !important;
		}

	/* Plurilingual */
	
		.plurilingual {
			background-color: #ffe9ba;
		}

		.plurilingual .index-project-title {
			background-color: #ffe9ba;
		}
	
	/* Premio Strega */
	
		.premio-strega {
			background-color: #23ac78;
		}

		.premio-strega .index-project-title {
			background-color: #23ac78;
		}
	
	/* Slow Travel */
	
		.slow-travel {
			background-color: #feead2;
		}

		.slow-travel .index-project-title {
			background-color: #feead2;
		}
	
	/* Summer spots */
	
		.summer-spots {
			background-color: white;
		}

		.summer-spots .index-project-title {
			background-color: white;
		}
	
	/* West */
	
		.west {
			background-color: black;
		}

		.west .index-project-title {
			background-color: black;
			color: white;
		}

	/* Winter spots */
	
		.winter-spots {
			background-color: white;
		}

		.winter-spots .index-project-title {
			background-color: white;
		}

/* ============================================================================= */
/* About page */

#main-about {
	flex: 1;
	display: grid;
	grid-column-gap: 2em;
	grid-template-columns: repeat(6, 1fr);
}

	/* Tablet & mobile - Landscape orientation */

		@media only screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {

			#main-about {
				grid-template-columns: repeat(8, 1fr);
			}
		}

	/* Mobile - Portrait orientation */

		@media screen and (orientation: portrait) and (max-width: 767px) {
			#main-about {
				grid-template-columns: 1fr;
			}
		}
	
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */	
/* Portrait photo */
	
	.about-portrait {
		background-image: url("./Images/About/Portrait.jpg");
		background-size: 100%;
		background-position: top;
		background-repeat: no-repeat;
		position: relative;
		top: clamp(0.63rem, 0.39vi + 0.53rem, 0.84rem);
		height: auto;
		grid-column: 1 / span 1;
		grid-row: 1 / span 2;
	}

	/* Tablet */
		
		/* Tablet - Portrait orientation */

	@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {

			.about-portrait {
				aspect-ratio: 2 / 3;
				grid-column: 1 / span 2;
				grid-row: 1;
				margin-top: clamp(0.63rem, 0.39vi + 0.53rem, 0.84rem);
				margin-bottom: clamp(1.88rem, 1.16vi + 1.6rem, 2.53rem);
			}
		}
			
		/* Tablet & mobile - Landscape orientation*/
			
		@media only screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
			
			.about-portrait {
				
				grid-column: 1 / span 2;
				grid-row: 1;
				margin-top: clamp(0.5rem, 0.11vi + 0.47rem, 0.56rem);
			}
		}

	/* Mobile - Portrait orientation */

		@media screen and (orientation: portrait) and (max-width: 767px) {
			
			.about-portrait {
				grid-column: 1 / span 1;
				grid-row: 1;
				aspect-ratio: 2 / 3;
				margin-bottom: clamp(1.88rem, 1.16vi + 1.6rem, 2.53rem);
			}
		}
			
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */	
/* Intro */
	
	#about-intro {
		grid-column: 3 / span 4;
		grid-row: 1;
		padding-right: 5%;
	}

	/* Tablet - Portrait orientation*/
		
		@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {
	
			#about-intro {
				grid-column: 1 / span 6;
				grid-row: 2;
				padding-right: 5%;
			}
		}
			
	/* Tablet & mobile - Landscape orientation*/
		
		@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
			
			#about-intro {
				grid-column: 3 / span 6;
				grid-row: 1;
				padding-right: 5%;
				margin-top: clamp(0.63rem, 0.39vi + 0.53rem, 0.84rem);
			}
		}

	/* Mobile - Portrait orientation */

		@media screen and (orientation: portrait) and (max-width: 767px) {
		
			#about-intro {
				grid-column: 1;
				grid-row: 2;
			}
		}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */	
/* Details */
			
	#about-detail-1 {
		grid-column: 3 / span 2;
		grid-row: 2;
	}

	#about-detail-2 {
		grid-column: 5 / span 2;
		grid-row: 2;
		padding-right: 5%;
	}

	/* Tablet - Portrait orientation */
		
		@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {
			
			#about-detail-1 {
				grid-column: 1 / span 3;
				grid-row: 3;
			}
			
			#about-detail-2 {
				grid-column: 4 / span 3;
				grid-row: 3;
			}
		}
		
	/* Tablet & mobile - Landscape orientation */
			
		@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
			
			#about-detail-1 {
				grid-column: 3 / span 3;
				grid-row: 2;
			}

			#about-detail-2 {
				grid-column: 6 / span 3;
				grid-row: 2;
			}
		}
		
	/* Mobile - Portrait orientation */

		@media screen and (orientation: portrait) and (max-width: 767px) {
			
			#about-detail-1 {
				grid-column: 1;
				grid-row: 3;
			}

			#about-detail-2 {
				grid-column: 1;
				grid-row: 4;
			}
		}

/* ============================================================================= */
/* Project pages */
	
#main-project {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-column-gap: 2em;
	grid-template-rows: auto;
	margin-top: clamp(1.2rem, -0.13vi + 1.23rem, 1.13rem);
}

	/* Tablet and mobile- Portrait orientation */
		
		@media screen and (orientation: portrait) and (max-width: 1199px) {
			#main-project {
				display: flex;
				flex-direction: column;
			}
		}
		
	/* Tablet & mobile - Landscape orientation */
			
		@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
			
			#main-project {
				grid-template-columns: repeat(3, 1fr);
			}
		}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Description */
	
#project-description {
	grid-column: 1 / span 2;
	grid-row: 1;
	grid-row-end: auto;
	position: sticky;
	top: calc(3.1em + (clamp(1.2rem, -0.13vi + 1.23rem, 1.13rem)));
	padding-right: 10%;
}

	/* Tablet - Portrait orientation */
		
		@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {
			
			#project-description {
				position: static;
				margin-bottom: clamp(1.88rem, 1.16vi + 1.6rem, 2.53rem);
				padding-right: 50%;
			}	
		}

		/* Mobile - Portrait orientation */
		
		@media screen and (orientation: portrait) and (max-width: 768px) {
			
			#project-description {
				position: static;
				margin-bottom: clamp(1.88rem, 1.16vi + 1.6rem, 2.53rem);
				padding-right: 0;
			}	
		}

	/* Tablet and mobile - Landscape orientation */
		
		@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
			
			#project-description {
				grid-column: 1;
			}	
		}	
		
		.project-description-title {
			font-weight: 700;
		}
	
		.project-description-year {
			margin-bottom: clamp(0.5rem, 0.11vi + 0.47rem, 0.56rem);
		}
		
		.project-caption {
			font-style: italic;
			margin-bottom: clamp(0.5rem, 0.11vi + 0.47rem, 0.56rem);
		}

		.project-filters {
			font-family: "apfel-grotezk", sans-serif;
			font-size: 90%;
			display: flex;
  			gap: 0.2em;
  			flex-wrap: wrap;
		}
	
			.project-filters-options {
				background-color: snow;
  				color: gray;
  				border: 1px solid gray;
  				border-radius: 8px;
  				padding: 0.04em 0.4em;
  				cursor: pointer;
 				transition: color 0.2s ease, border-color 0.2s ease;
  				letter-spacing: 0.01em;
  				appearance: none;
			}

			.project-filters-options:hover {
				color: black;
				border-color: black;
			}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Images */

/* Images standard */
	
	/* Image 1 */
		
		/* Centred */
	
		#project-img-1-centred {
			grid-column: 3 / span 3;
			grid-row: 1;
			margin-bottom: 1em;
			justify-self: center;
		}

			/* Tablet and mobile - Landscape orientation */
		
				@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
					#project-img-1-centred {
						grid-column: 2 / span 2;
						justify-self: right;
					}
				}

		/* Wide */
	
		#project-img-1-wide {
			grid-column: 3 / span 5;
			grid-row: 1;
			margin-bottom: 1em;
			justify-self: left;
			width: 100%;
			}

			/* Tablet and mobile - Landscape orientation */
		
				@media screen and (orientation: landscape) and (max-width: 1199px) {
				
					#project-img-1-wide {
						grid-column: 2 / span 2;
						justify-self: right;
						width: auto;
					}
				}
	
		/* Full */
	
		#project-img-1-full {
			grid-column: 3 / span 5;
			grid-row: 1;
			justify-self: left;
			}

			/* Tablet and mobile - Landscape orientation */
		
				@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
					#project-img-1-full {
						grid-column: 2 / span 2;
					}
				}
		
	/* Image 2 */
	
		/* Wide */
	
		#project-img-2 {
			grid-column: 3 / span 5;
			grid-row: 2;
			margin-bottom: 1em;
			}

			/* Tablet and mobile - Landscape */

			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-2 {
					grid-column: 2 / span 2;
					grid-row: 2;
					}
				}
		
		/* Centred */
	
		#project-img-2-centred {
			grid-column: 3 / span 3;
			grid-row: 2;
			margin-bottom: 1em;
			justify-self: center;
		}

			/* Tablet and mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-2-centred {
					grid-column: 2 / span 2;
					justify-self: right;
				}
			}
	
	/* Image 2 */
	
		/* Wide */
	
		#project-img-3 {
			grid-column: 3 / span 5;
			grid-row: 3;
			margin-bottom: 1em;
			}

		/* Tablet and mobile - Landscape orientation */
		
				@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
					#project-img-3 {
						grid-column: 2 / span 2;
						grid-row: 3;
						justify-self: right;
					}
				}
	
		/* Centred */
	
		#project-img-3-centred {
			grid-column: 3 / span 3;
			grid-row: 3;
			margin-bottom: 1em;
			justify-self: center;
			}

			/* Tablet and mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-3-centred {
					grid-column: 2 / span 2;
					justify-self: right;
				}
			}
	
	/* Image 4 */
	
		/* Wide */	
	
		#project-img-4 {
			grid-column: 3 / span 5;
			grid-row: 4;
			margin-bottom: 1em;
			}

		/* Tablet and mobile - Landscape orientation */
		
				@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
					#project-img-4 {
						grid-column: 2 / span 2;
						grid-row: 4;
						justify-self: right;
					}
				}
	
		/* Centred */
	
		#project-img-4-centred {
			grid-column: 3 / span 3;
			grid-row: 4;
			margin-bottom: 1em;
			justify-self: center;
			}	
	
			/* Tablet and mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-4-centred {
					grid-column: 2 / span 2;
					justify-self: right;
				}
			}
		
	#project-img-5 {
		grid-column: 3 / span 5;
		grid-row: 5;
		margin-bottom: 1em;
		}
	
		/* Tablet and mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-5 {
					grid-column: 2 / span 2;
					grid-row: 5;
				}
			}
	
		/* Centred */
	
		#project-img-5-centred {
			grid-column: 3 / span 3;
			grid-row: 5;
			margin-bottom: 1em;
			justify-self: center;
			}	
	
			/* Tablet and mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-5-centred {
					grid-column: 2 / span 2;
					justify-self: right;
				}
			}


	#project-img-6 {
		grid-column: 3 / span 5;
		grid-row: 6;
		margin-bottom: 1em;
		}
	
		/* Tablet and mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-6 {
					grid-column: 2 / span 2;
					grid-row: 6;
				}
			}

	/* Image 7 */
	
		/* Standard */	
	
		#project-img-7 {
			grid-column: 3 / span 5;
			grid-row: 7;
			margin-bottom: 1em;
			}
		
			/* Tablet and mobile - Landscape orientation */
		
				@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
					#project-img-7 {
						grid-column: 2 / span 2;
						grid-row: 7;
					}
				}

		/* 1 / 4 column split */	
	
		#project-img-7a {
			grid-column: 3 / span 1;
			grid-row: 7;
			margin-bottom: 1em;
			}

		/* Tablet and mobile - Portrait orientation */
		
				@media screen and (orientation: portrait) and (max-width: 1199px) {
				
					#project-img-7a {
						display: flex;
						justify-content: center;
					}
				}

			/* Tablet and mobile - Landscape orientation */
		
				@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
					#project-img-7a {
						grid-column: 2 / span 2;
						grid-row: 7;
					}
				}
	
		#project-img-7b {
			grid-column: 4 / span 4;
			grid-row: 7;
			margin-bottom: 1em;
			}

				/* Tablet and mobile - Landscape orientation */
		
				@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
					#project-img-7b {
						grid-column: 2 / span 2;
						grid-row: 8;
					}
				}
	
	#project-img-8 {
		grid-column: 3 / span 5;
		grid-row: 9;
		margin-bottom: 1em;
		}

		/* Tablet and mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-8 {
					grid-column: 2 / span 2;
					grid-row: 9;
				}
			}
	
	#project-img-9 {
		grid-column: 3 / span 5;
		grid-row: 10;
		margin-bottom: 1em;
		}

		/* Tablet and mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-9 {
					grid-column: 2 / span 2;
					grid-row: 10;
				}
			}
	
	#project-img-10 {
		grid-column: 3 / span 5;
		grid-row: 11;
		margin-bottom: 1em;
		}

		/* Tablet and mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-10 {
					grid-column: 2 / span 2;
					grid-row: 11;
				}
			}
	
	#project-img-11 {
		grid-column: 3 / span 5;
		grid-row: 12;
		margin-bottom: 1em;
		}

		/* Tablet and mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-11 {
					grid-column: 2 / span 2;
					grid-row: 12;
				}
			}
	
	#project-img-12 {
		grid-column: 3 / span 5;
		grid-row: 13;
		margin-bottom: 1em;
		}

		/* Tablet and mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-12 {
					grid-column: 2 / span 2;
					grid-row: 13;
				}
			}
	
	#project-img-13 {
		grid-column: 3 / span 5;
		grid-row: 14;
		margin-bottom: 1em;
		}

		/* Tablet and mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-13 {
					grid-column: 2 / span 2;
					grid-row: 14;
				}
			}
	
	#project-img-14 {
		grid-column: 3 / span 5;
		grid-row: 15;
		margin-bottom: 1em;
		}

		/* Tablet and mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-14 {
					grid-column: 2 / span 2;
					grid-row: 15;
				}
			}
	
	#project-img-15 {
		grid-column: 3 / span 5;
		grid-row: 16;
		margin-bottom: 1em;
		}

		/* Tablet and mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-15 {
					grid-column: 2 / span 2;
					grid-row: 16;
				}
			}
	
	#project-img-16 {
		grid-column: 3 / span 5;
		grid-row: 17;
		margin-bottom: 1em;
		}	

		/* Tablet and mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				#project-img-16 {
					grid-column: 2 / span 2;
					grid-row: 17;
				}
			}

/* Images special */
	
		/* BM Activities */
	
		#project-img-1-activities {
			grid-column: 3 / span 5;
			grid-row: 1;
			margin-bottom: 1em;
			justify-self: left;
			width: 100%;
			}

			/* Tablet and mobile - Landscape orientation */
		
				@media screen and (orientation: landscape) and (max-width: 1199px) {
				
					#project-img-1-activities {
						grid-column: 2 / span 2;
						width: 100%;
						background-color: #435642;
						display: flex;
						justify-content: center;
						align-items: center;
    					height: calc(100vh - 4em - (clamp(1.2rem, -0.13vi + 1.23rem, 1.13rem)));
					}
				}

	/* BM Conservation */
	
		#project-img-1-conservation {
			grid-column: 3 / span 5;
			grid-row: 1;
			margin-bottom: 1em;
			justify-self: left;
			width: 100%;
			}

			/* Tablet and mobile - Landscape orientation */
		
				@media screen and (orientation: landscape) and (max-width: 1199px) {
				
					#project-img-1-conservation {
						grid-column: 2 / span 2;
						width: 100%;
						background-color: #435642;
						display: flex;
						justify-content: center;
						align-items: center;
    					height: calc(100vh - 4em - (clamp(1.2rem, -0.13vi + 1.23rem, 1.13rem)));
					}
				}

	/* BM Michelangelo */
	
		#project-img-bmm-10 {
			grid-column: 3 / span 2;
			grid-row: 10;
			margin-bottom: 1em;
			}
	
	/* BM Remus */
	
		#project-img-1-remus {
			grid-column: 3 / span 5;
			grid-row: 1;
			margin-bottom: 1em;
			justify-self: left;
			width: 100%;
			}

			/* Tablet and mobile - Landscape orientation */
		
				@media screen and (orientation: landscape) and (max-width: 1199px) {
				
					#project-img-1-remus {
						grid-column: 2 / span 2;
						width: 100%;
						background-color: #111f35;
						display: flex;
						justify-content: center;
						align-items: center;
    					height: calc(100vh - 4em - (clamp(1.2rem, -0.13vi + 1.23rem, 1.13rem)));
					}
				}

	/* BM Trips */
	
		#project-img-1-trips {
			grid-column: 3 / span 5;
			grid-row: 1;
			margin-bottom: 1em;
			justify-self: left;
			width: 100%;
			}

			/* Tablet and mobile - Landscape orientation */
		
				@media screen and (orientation: landscape) and (max-width: 1199px) {
				
					#project-img-1-trips {
						grid-column: 2 / span 2;
						width: 100%;
						background-color: #7e5fac;
						display: flex;
						justify-content: center;
						align-items: center;
    					height: calc(100vh - 4em - (clamp(1.2rem, -0.13vi + 1.23rem, 1.13rem)));
					}
				}

	/* Eunice Newton Foote */

	.project-enf-text {
		font-style: italic;
		font-weight: 700;
	}

	#project-img-enf-1 {
		grid-column: 3 / span 3;
		grid-row: 1;
		margin-bottom: 2em;
		}
	
		/* Tablet and mobile - Landscape orientation */
		
		@media screen and (orientation: landscape) and (max-width: 1199px) {
				
			#project-img-enf-1 {
				grid-column: 2 / span 2;
			}
		}

	#project-img-enf-2 {
		grid-column: 3 / span 3;
		grid-row: 2;
		margin-bottom: 2em;
		}

		/* Tablet and mobile - Landscape orientation */
		
		@media screen and (orientation: landscape) and (max-width: 1199px) {
				
			#project-img-enf-2 {
				grid-column: 2 / span 2;
			}
		}
	
	#project-img-enf-3 {
		grid-column: 3 / span 3;
		grid-row: 3;
		margin-bottom: 2em;
		}
	
		/* Tablet and mobile - Landscape orientation */
		
		@media screen and (orientation: landscape) and (max-width: 1199px) {
				
			#project-img-enf-3 {
				grid-column: 2 / span 2;
			}
		}
	
	#project-img-enf-4 {
		grid-column: 3 / span 3;
		grid-row: 4;
		margin-bottom: 2em;
		}

		/* Tablet and mobile - Landscape orientation */
		
		@media screen and (orientation: landscape) and (max-width: 1199px) {
				
			#project-img-enf-4 {
				grid-column: 2 / span 2;
			}
		}
	
	#project-img-enf-5 {
		grid-column: 3 / span 3;
		grid-row: 5;
		margin-bottom: 2em;
		}

		/* Tablet and mobile - Landscape orientation */
		
		@media screen and (orientation: landscape) and (max-width: 1199px) {
				
			#project-img-enf-5 {
				grid-column: 2 / span 2;
			}
		}
	
	#project-img-enf-6 {
		grid-column: 3 / span 3;
		grid-row: 6;
		margin-bottom: 2em;
		}
	
		/* Tablet and mobile - Landscape orientation */
		
		@media screen and (orientation: landscape) and (max-width: 1199px) {
				
			#project-img-enf-6 {
				grid-column: 2 / span 2;
			}
		}

	/* Tablet - Portrait orientation */

		@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1199px){
			
			.project-enf-text {
				padding-right: 36%;
			}
		}

	/* Summer spots */
	
		.project-img-ssp-tablet-1,
		.project-img-ssp-tablet-2,
		.project-img-ssp-tablet-3 {
			display: contents;
		}

	#project-img-ssp-1 {
		grid-column: 3 / span 1;
		grid-row: 1;
		height: 35vh;
		justify-self: left;
		margin-bottom: 3em;
		}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-ssp-1 {
				grid-column: 2 / span 1;
				height: 40vh;
			}
		}

		/* Mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-ssp-1 {
				height: 70vh;
			}
		}	
	
	#project-img-ssp-2 {
		grid-column: 4 / span 2;
		grid-row: 1;
		height: 35vh;
		justify-self: center;
		margin-bottom: 3em;
		}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-ssp-2 {
				grid-column: 3 / span 1;
				height: 40vh;
			}
		}

		/* Mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-ssp-2 {
				height: 70vh;
			}
		}
	
	#project-img-ssp-3 {
		grid-column: 6 / span 2;
		grid-row: 1;
		height: 35vh;
		justify-self: left;
		margin-bottom: 3em;
		}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-ssp-3 {
				grid-column: 2 / span 1;
				grid-row: 2;
				height: 40vh;
			}
		}

		/* Mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-ssp-3 {
				height: 70vh;
			}
		}
	
	#project-img-ssp-4 {
		grid-column: 3 / span 2;
		grid-row: 2;
		height: 29vh;
		justify-self: center;
		margin-bottom: 3em;
		}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-ssp-4 {
				grid-column: 3 / span 1;
				grid-row: 2;
				height: 33vh;
				align-self: flex-end;
			}
		}

		/* Mobile - Portrait orientation */

		@media screen and (orientation: portrait) and (max-width: 767px){
			
			#project-img-ssp-4 {
				margin-bottom: 2em;
			}
		}

		/* Mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-ssp-4 {
				height: 58vh;
			}
		}

	#project-img-ssp-5 {
		grid-column: 5 / span 3;
		grid-row: 2;
		height: 26vh;
		justify-self: left;
		align-self: center;
		margin-bottom: 3em;
	}
	
		/* Tablet - Portrait orientation */

		@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {
		
			#project-img-ssp-5 {
				width: 80%;
				height: auto;
				justify-self: center;
				margin-bottom: 1em;
			}
		}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-ssp-5 {
				grid-column: 2 / span 2;
				grid-row: 3;
				justify-self: center;
				height: 30vh;
			}
		}

		/* Mobile - Portrait orientation */

		@media screen and (orientation: portrait) and (max-width: 767px){
			
			#project-img-ssp-5 {
				margin-bottom: 0;
			}
		}

		/* Mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-ssp-5 {
				height: 52vh;
			}
		}

	#project-img-ssp-6 {
		grid-column: 3 / span 2;
		grid-row: 3;
		height: 30vh;
		justify-self: left;
		margin-bottom: 3em;
	}

		/* Tablet - Portrait orientation */

		@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {
		
			#project-img-ssp-6 {
				width: 90%;
				height: auto;
				padding-left: 10%;
				margin-bottom: 2em;
			}
		}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-ssp-6 {
				grid-column: 2 / span 2;
				grid-row: 4;
				justify-self: center;
				height: 34.2vh;
			}
		}

		/* Mobile - Portrait orientation */

		@media screen and (orientation: portrait) and (max-width: 767px){
			
			#project-img-ssp-6 {
				margin-bottom: 0;
			}
		}

		/* Mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-ssp-6 {
				height: 60vh;
			}
		}
	
	#project-img-ssp-7 {
		grid-column: 5 / span 2;
		grid-row: 3;
		height: 30vh;
		justify-self: center;
		margin-bottom: 3em;
	}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-ssp-7 {
				grid-column: 2 / span 1;
				grid-row: 5;
				height: 34.2vh;
			}
		}

		/* Mobile - Portrait orientation */

		@media screen and (orientation: portrait) and (max-width: 767px){
			
			#project-img-ssp-7 {
				margin-bottom: 0;
			}
		}

		/* Mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-ssp-7 {
				height: 60vh;
			}
		}

	#project-img-ssp-8 {
		grid-column: 3 / span 2;
		grid-row: 4;
		height: 30vh;
		justify-self: center;
		margin-bottom: 3em;
	}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-ssp-8 {
				grid-column: 3 / span 1;
				grid-row: 5;
				height: 34.2vh;
			}
		}

		/* Mobile - Portrait orientation */

		@media screen and (orientation: portrait) and (max-width: 767px){
			
			#project-img-ssp-8 {
				margin-bottom: 0;
			}
		}
	
		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-ssp-8 {
				height: 60vh;
			}
		}

	#project-img-ssp-9 {
		grid-column: 5 / span 3;
		grid-row: 4;
		height: 30vh;
		justify-self: left;
		margin-bottom: 3em;
		}
	
		/* Tablet - Portrait orientation */

		@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {
		
			#project-img-ssp-9 {
				width: 90%;
				height: auto;
				padding-left: 10%;
			}
		}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-ssp-9 {
				grid-column: 2 / span 2;
				grid-row: 6;
				justify-self: center;
				margin-bottom: 1em;
				height: 34.2vh;
			}
		}

		/* Mobile - Portrait orientation */

		@media screen and (orientation: portrait) and (max-width: 767px){
			
			#project-img-ssp-9 {
				margin-bottom: 0;
			}
		}

		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-ssp-9 {
				height: 60vh;
			}
		}

		.project-img-ssp {
			width: 100%;
			height: 100%;
			object-fit: contain;
			margin-bottom: 2em;
		}

		/* Tablet - Portrait orientation */

		@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {
  			.project-img-ssp-tablet-1,
			.project-img-ssp-tablet-2,
			.project-img-ssp-tablet-3 {
   				display: flex;
   				flex-direction: row;
    			gap: 4em;
    			justify-content: center;
    			align-items: center;
			}
		}

	/* Winter spots */
	
		.project-img-wsp-tablet-1,
		.project-img-wsp-tablet-2,
		.project-img-wsp-tablet-3 {
			display: contents;
		}

	#project-img-wsp-1 {
		grid-column: 3 / span 2;
		grid-row: 1;
		height: 35vh;
		justify-self: left;
		margin-bottom: 3em;
		}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-wsp-1 {
				grid-column: 2 / span 1;
				height: 40vh;
			}
		}

		/* Mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-wsp-1 {
				height: 70vh;
			}
		}	
	
	#project-img-wsp-2 {
		grid-column: 5 / span 1;
		grid-row: 1;
		height: 35vh;
		justify-self: left;
		margin-bottom: 3em;
		}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-wsp-2 {
				grid-column: 3 / span 1;
				height: 40vh;
			}
		}

		/* Mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-wsp-2 {
				height: 70vh;
			}
		}
	
	#project-img-wsp-3 {
		grid-column: 6 / span 2;
		grid-row: 1;
		height: 35vh;
		justify-self: center;
		margin-bottom: 3em;
		}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-wsp-3 {
				grid-column: 2 / span 1;
				grid-row: 2;
				height: 40vh;
			}
		}

		/* Mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-wsp-3 {
				height: 70vh;
			}
		}
	
	#project-img-wsp-4 {
		grid-column: 3 / span 2;
		grid-row: 2;
		height: 29vh;
		justify-self: center;
		margin-bottom: 3em;
		}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-wsp-4 {
				grid-column: 3 / span 1;
				grid-row: 2;
				height: 37vh;
				align-self: flex-end;
			}
		}

		/* Mobile - Portrait orientation */

		@media screen and (orientation: portrait) and (max-width: 767px){
			
			#project-img-wsp-4 {
				margin-bottom: 2em;
			}
		}

		/* Mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-wsp-4 {
				height: 58vh;
			}
		}

	#project-img-wsp-5 {
		grid-column: 5 / span 3;
		grid-row: 2;
		height: 28vh;
		justify-self: center;
		align-self: center;
		margin-bottom: 3em;
	}
	
		/* Tablet - Portrait orientation */

		@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {
		
			#project-img-wsp-5 {
				grid-column: 3 / span 2;
				width: 80%;
				grid-row: 3;
				height: auto;
				justify-self: center;
				margin-bottom: 1em;
			}
		}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-wsp-5 {
				grid-column: 2 / span 1;
				grid-row: 3;
				justify-self: center;
				height: 30vh;
			}
		}

		/* Mobile - Portrait orientation */

		@media screen and (orientation: portrait) and (max-width: 767px){
			
			#project-img-wsp-5 {
				margin-bottom: 2em;
			}
		}

		/* Mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-wsp-5 {
				height: 52vh;
			}
		}

	#project-img-wsp-6 {
		grid-column: 3 / span 2;
		grid-row: 3;
		height: 32vh;
		justify-self: left;
		margin-bottom: 3em;
	}

		/* Tablet - Portrait orientation */

		@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {
		
			#project-img-wsp-6 {
				grid-column: 5 / span 2;
				grid-row: 3;
				width: 90%;
				height: auto;
				padding-left: 10%;
				margin-bottom: 2em;
			}
		}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-wsp-6 {
				grid-column: 3 / span 1;
				grid-row: 3;
				justify-self: center;
				height: 34.2vh;
			}
		}

		/* Mobile - Portrait orientation */

		@media screen and (orientation: portrait) and (max-width: 767px){
			
			#project-img-wsp-6 {
				margin-bottom: 2em;
			}
		}

		/* Mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-wsp-6 {
				height: 60vh;
			}
		}
	
	#project-img-wsp-7 {
		grid-column: 5 / span 2;
		grid-row: 3;
		height: 32vh;
		justify-self: left;
		margin-bottom: 3em;
	}

		/* Tablet and mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px){
			
			#project-img-wsp-7 {
				grid-column: 2 / span 2;
				justify-self: center;
				grid-row: 4;
				height: 34.2vh;
			}
		}

		/* Mobile - Portrait orientation */

		@media screen and (orientation: portrait) and (max-width: 767px){
			
			#project-img-wsp-7 {
				margin-bottom: 2em;
			}
		}

		/* Mobile - Landscape orientation */

		@media screen and (orientation: landscape) and (max-width: 1199px) and (min-aspect-ratio: 1.6) and (max-aspect-ratio: 2.3){
			
			#project-img-wsp-7 {
				height: 60vh;
			}
		}

		.project-img-wsp {
			width: 100%;
			height: 100%;
			object-fit: contain;
			margin-bottom: 2em;
		}

		/* Tablet - Portrait orientation */

		@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {
  			.project-img-wsp-tablet-1,
			.project-img-wsp-tablet-2,
			.project-img-wsp-tablet-3 {
   				display: flex;
   				flex-direction: row;
    			gap: 4em;
    			justify-content: center;
    			align-items: center;
			}
		}		


/* Image styles*/

	.project-img {
  		height: calc(100vh - 4em - (clamp(1.2rem, -0.13vi + 1.23rem, 1.13rem)));
		object-fit: cover;
	}

		/* Tablet & mobile - Portrait orientation */
		
			@media screen and (orientation: portrait) and (max-width: 1199px) {
				
				.project-img {
					width: 100%;
					height: auto;
				}
			}
				
	.project-img-centred {
 		height: calc(100vh - 4em - (clamp(1.2rem, -0.13vi + 1.23rem, 1.13rem)));
		object-fit: cover;
		width: 100%;
		display: block;
	}
	
	.project-img-wide {
  		height: calc(100vh - 4em - (clamp(1.2rem, -0.13vi + 1.23rem, 1.13rem)));
		width: 100%;
		object-fit: cover;
  		display: block;
	}

		/* Tablet & mobile - Portrait orientation */
		
			@media screen and (orientation: portrait) and (max-width: 1199px) {
				
				.project-img-wide {
					width: 100%;
					height: auto;
				}
			}

		/* Tablet & mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (max-width: 1199px) {
				
				.project-img-wide {
					object-position: right center;
				}
			}

	.project-img-publications {
  		height: calc(100vh - 4em - (clamp(1.2rem, -0.13vi + 1.23rem, 1.13rem)));
		width: 100%;
		object-fit: cover;
  		display: block;
	}

		/* Tablet & mobile - Portrait orientation */
		
			@media screen and (orientation: portrait) and (max-width: 1199px) {
				
				.project-img-publications {
					height: auto;
				}
			}
		/* Tablet - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				.project-img-publications {
					width: auto;
    				height: 100%;
    				object-fit: contain;
				}
			}

		/* Mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (max-width: 767px) {
				
				.project-img-publications {
    				object-fit: contain;
				}
			}

	.project-img-detail {
  		height: calc(100vh - 4em - (clamp(1.2rem, -0.13vi + 1.23rem, 1.13rem)));
		width: 100%;
		object-fit: cover;
  		display: block;
	}

		/* Tablet & mobile - Portrait orientation */
		
			@media screen and (orientation: portrait) and (max-width: 1199px) {
				
				.project-img-detail {
					height: auto;
				}
			}
		/* Tablet - Landscape orientation */
		
			@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) {
				
				.project-img-detail {
					width: auto;
    				height: 100%;
					object-position: left;
				}
			}

		/* Mobile - Landscape orientation */
		
			@media screen and (orientation: landscape) and (max-width: 767px) {
				
				.project-img-detail {
					object-fit: cover;
					object-position: right;
				}
			}

	@media screen and (orientation: portrait) and (max-width: 1199px) {

		.project-img-mobile {
			width: 60%;
			height: auto;
		}
	}

	@media screen and (orientation: landscape) and (max-width: 1199px) {

		.project-img-mobile {
			height: calc(100vh - 4em - (clamp(1.2rem, -0.13vi + 1.23rem, 1.13rem)));;
  			object-fit: cover;
  			display: block;
			justify-self: left;
		}
	}
		

	.project-vid {
  		height: calc(100vh - 4em - (clamp(1.2rem, -0.13vi + 1.23rem, 1.13rem)));;
  		object-fit: cover;
  		display: block;
		justify-self: left;
	}

		/* Tablet & mobile - Portrait orientation */

		@media screen and (orientation: portrait) and (max-width: 1199px) {

			.project-vid {
				width: 60%;
				height: auto;
				margin: auto;
			}
		}

/* Footer */
	
	#footer {
		grid-column: 1 / span 2;
		grid-row: 2 / span 50;
		align-content: end;
		margin-bottom: 1em;
		}