/* ======================================================== BREAKPOINT : 600px w ===== */
@media only screen and (min-width: 600px) {
	/* ===================================== STUDIO PAGE */
	#clients-list figure {
		width: calc((100% - (var(--gallery-gap) * (var(--gallery-rowcount-large) - 1))) / var(--gallery-rowcount-large));
	}
}

/* ======================================================== BREAKPOINT : 710px w ===== */
@media only screen and (min-width: 710px) {
	.body-content h1 {
		font-size: 2.0625rem;
	}
		
	.columns-1-2 {
		flex-direction: row;
	}
	.columns-1-2 > * {
		flex: 0 0 48.5%;
	}

	/* ===================================== HEADER */
	#site-title {
		font-size: 1.75rem;
		line-height: 1.25;
	}
	
	#site-subtitle {
		display: block;
	}
	
	#nav-button {
		font-size: 1rem;
	}

	/* ===================================== DEMOS PAGE */
	#demos-container {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 1em;
		overflow: visible;
	}

	.demo-group {
		flex: 0 0 calc((100% / 2) - (1em / 2));
		padding: 0 !important;
	}
	
	.demo-description {
		width: 100%;
		aspect-ratio: 1;
		display: none;
		margin: 0;
		
		position: absolute;
		left: calc(100% + 1rem);
		z-index: 10;
		border: 1px solid var(--color-caption);
	}
	.demo-group.active .demo-description {
		display: flex;
	}
	.demo-description::before {
		content: "";
		width: 0px;
		height: 0px;
		position: absolute;
		top: 50%;
		left: -1.5em;
		transform: translateY(-0.75em);
		
		border: solid 0.75em transparent;
		border-right-color: var(--color-caption);
	}
	.demo-group:nth-child(2n) .demo-description {
		left: calc(-100% - 1rem);
	}
	.demo-group:nth-child(2n) .demo-description::before {
		left: 100%;
		border-right-color: transparent;
		border-left-color: var(--color-caption);
	}
	
	#demo-scrollpoints {
		display: none;
	}

	/* ===================================== PROJECTS PAGE */
	.project-group {
		flex-direction: row;
		align-items: flex-start;
	}
	
	.project-group img {
		max-width: 30%;
	}
	
	.project-group p {
		padding: var(--project-padding) var(--project-padding) var(--project-padding) calc(var(--project-padding) / 2);
	}
	
	.project-prize::before {
		display: block;
		width: calc(var(--project-prize-width) * 2.2 * 0.8);
		height: calc(var(--project-prize-width) * 2.2 * 0.8);
	}
	.project-prize::after {
		top: calc(var(--project-padding) * 1.8);
		left: calc(var(--project-padding) * 1.8);
		background-size: 80%;
	}
	
	/* ===================================== CONTACT PAGE */
	#team-contact {
		flex-direction: row;
		justify-content: space-around;
		gap: 2em;
	}
}


/* ======================================================== BREAKPOINT : 1200px w ===== (910px before)*/
@media only screen and (min-width: 1200px) {
	body {
		width: 100%;
	}
	
	.body-content h1 {
		font-size: 2.5rem;
		line-height: 1.225;
		margin-bottom: 1em;
	}
	
	.body-content {
		margin-left: var(--margin-side-largescreen-int);
		margin-right: var(--margin-side-largescreen-int);
	}
	
	/* ===================================== HEADER */
	#bloc-header, footer {
		margin-left: var(--margin-side-largescreen);
		margin-right: var(--margin-side-largescreen);
	}
	
	#bloc-header {
		flex-direction: row;
		align-items: center;
	}
	
	#nav-button {
		display: none;
	}
	
	#nav-menu.hidden {
		display: block;
	}
	
	nav {
		flex-shrink: 0;
	}
	
	nav ul:first-child, nav li {
		border: none;
	}
	
	nav li {
		float: left;
		padding: 0;
	}
	
	nav li:last-of-type a {
		padding-right: 0;
	}
	
	nav a {
		padding: 0.65625em 0.875em;
	}
	
	/* ===================================== BACK TO TOP BUTTON */
	#button-top {
		right: var(--margin-side-largescreen);
	}

	/* ===================================== DEMOS PAGE */
	#demos-container {
		gap: calc(2em / 2);
	}
	
	.demo-group {
		flex: 0 0 calc((100% / 3) - (2em / 3));
	}
	
	.demo-group:nth-child(2n) .demo-description {
		left: calc(100% + 1rem);
	}
	.demo-group:nth-child(2n) .demo-description::before {
		left: -1.5em;
		border-right-color: var(--color-caption);
		border-left-color: transparent;
	}
	.demo-group:nth-child(3n) .demo-description {
		left: calc(-100% - 1rem);
	}
	.demo-group:nth-child(3n) .demo-description::before {
		left: 100%;
		border-right-color: transparent;
		border-left-color: var(--color-caption);
	}
}