@media (min-width: 1336px) { /* min-content: 1192px, margin: 72px */
}
@media (min-width: 980px) and (max-width: 1335.9px) { /* min-content: 884px, margin: 48px */
}
@media (min-width: 768px) and (max-width: 979.9px) { /* min-content: 672px, margin: 48px */
}
@media (max-width: 767.9px) { /* min-content: 312px, margin: 24px */
}

/*********************
 * In-page navigation *
 *********************/

#in-page-nav-container {
	position: absolute;
	overflow: clip;
	padding-left: 48px;
}

#about-in-page-nav {
	position: sticky;
	background-color: var(--blue-400);
}
#about-in-page-nav #in-page-nav-button {
	position: absolute;
	background-color: var(--blue-400);
}

#about-in-page-nav #in-page-nav-button::before {
	content: "R";
	font-family: "Icons";
	color: var(--light-100);
}
#about-in-page-nav a {
	color: var(--light-100);
}
@media (min-width: 1336px) { /* min-content: 1192px, margin: 72px */
	#in-page-nav-container {
		top: calc(128px + 75px + 24px + 40vh + 64px); /* sum of site header, h1 + margin-bottom, hero image, and section.text margin-top */
		right: 0;
		height: calc(100% - ((128px + 75px + 24px + 40vh + 64px))); /* minus top so div doesn't overflow below footer */
	}
	#about-in-page-nav {
		top: 124px; /* collapsed site header + 48px */
		right: 0;
		padding: 24px 24px;
		border-radius: 24px 0 0 24px;
	}
	#in-page-nav-button {
		display: none;
	}
	
}
@media (min-width: 980px) and (max-width: 1335.9px) { /* min-content: 884px, margin: 48px */
	#in-page-nav-container {
		top: calc(128px + 57px + 24px + 40vh + 48px); /* sum of site header, h1 + margin-bottom, hero image, and section.text margin-top */
		right: 0;
		height: calc(100% - (128px + 57px + 24px + 40vh + 48px)); /* minus top so div doesn't overflow below footer */
	}
	#about-in-page-nav {
		top: 112px; /* collapsed site header + 48px */
		right: 0;
		padding: 24px 24px;
		border-radius: 0 0 0 24px;
		transition: 0.5s;
	}
	#about-in-page-nav.is-closed {
		transform: translateX(164px);
		transition: 0.5s;
	}
	#in-page-nav-button {
		top: 0;
		left: -48px;
		width: 48px;
		height: 48px;
		border-radius: 24px 0 0 24px;
	}
	#in-page-nav-button::before {
		font-size: 32px;
		transform: rotate(0);
		transition: 0.5s;
	}
	#about-in-page-nav.is-closed #in-page-nav-button::before {
		transform: rotate(180deg);
		transition: 0.5s;
	}
}
@media (min-width: 768px) and (max-width: 979.9px) { /* min-content: 672px, margin: 48px */
	#in-page-nav-container {
		top: calc(64px + 38px + 24px + 40vh + 32px); /* sum of site header, h1 + margin-bottom, hero image, and section.text margin-top */
		right: 0;
		height: calc(100% - (calc(64px + 38px + 24px + 40vh + 32px))); /* minus top so div doesn't overflow below footer */
	}
	#about-in-page-nav {
		top: 108px; /* collapsed site header + 44px */
		right: 0;
		padding: 24px 24px;
		border-radius: 0 0 0 22px;
		transition: 0.5s;
	}
	#about-in-page-nav.is-closed {
		transform: translateX(164px);
		transition: 0.5s;
	}
	#in-page-nav-button {
		top: 0;
		left: -44px;
		width: 44px;
		height: 44px;
		border-radius: 22px 0 0 22px;
	}
	#in-page-nav-button::before {
		font-size: 28px;
		transform: rotate(0);
		transition: 0.5s;
	}
	#about-in-page-nav.is-closed #in-page-nav-button::before {
		transform: rotate(180deg);
		transition: 0.5s;
	}
}
@media (max-width: 767.9px) { /* min-content: 312px, margin: 24px */
	#in-page-nav-container {
		top: calc(44px + 37px + 24px + 40vh + 20px); /* sum of site header, h1 + margin-bottom, hero image, and section.text margin-top */
		right: 0;
		height: calc(100% - (44px + 37px + 24px + 40vh + 20px));
	}
	#about-in-page-nav {
		top: 88px; /* collapsed site header + 44px */
		right: 0;
		padding: 16px 16px;
		border-radius: 0 0 0 22px;
		transition: 0.5s;
	}
	#about-in-page-nav.is-closed {
		transform: translateX(136px);
		transition: 0.5s;
	}
	#in-page-nav-button {
		top: 0;
		left: -44px;
		width: 44px;
		height: 44px;
		border-radius: 22px 0 0 22px;
	}
	#in-page-nav-button::before {
		font-size: 28px;
		transform: rotate(0);
		transition: 0.5s;
	}
	#about-in-page-nav.is-closed #in-page-nav-button::before {
		transform: rotate(180deg);
		transition: 0.5s;
	}
}


/*****************
 * About Interiio *
 *****************/
#about-interiio figure.hero {
	max-width: 100vw;
	width: 100vw;
	height: 40vh;
}
#about-interiio figure.hero img {
	object-fit: cover;
}

#page-main > #about-interiio {
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}
#about-interiio section.text {
	text-align: left;
}
@media (min-width: 1336px) { /* min-content: 1192px, margin: 72px */
	#about-interiio section.text {
		margin: 64px auto;
		width: 680px;
	}
}
@media (min-width: 980px) and (max-width: 1335.9px) { /* min-content: 884px, margin: 48px */
	#about-interiio section.text {
		margin: 48px auto;
		width: 680px;
	}
}
@media (min-width: 768px) and (max-width: 979.9px) { /* min-content: 672px, margin: 48px */
	#about-interiio section.text {
		margin: 32px auto;
		width: 498px;
	}
}
@media (max-width: 767.9px) { /* min-content: 312px, margin: 24px */
	#about-interiio section.text {
		margin: 20px;
	}
}


/********************
 * Designers & Team *
 ********************/


#designers-container,
#team-container {
	text-align: left;
}
#designers button figure,
#team button figure {
	border-radius: 50%;
}

#designers button,
#team button {
	display: inline-block;
	vertical-align: top;
	text-align: center;
}

#designers article,
#team article {
	display: none;
}

 @media (min-width: 1336px) { /* min-content: 1192px, margin: 72px */

	#page-main > #designers,
	#page-main > #team {
		text-align: center;
		padding-bottom: 80px;
		padding-top: 64px;
	}

	#designers > h2,
	#team > h2 {
		font-size: 64px;
		line-height: 96px;
	}

	#designers > p,
	#team > p {
		margin-bottom: 80px;
	}

	#designers-container,
	#team-container {
		width: 1044px;
		margin:auto;
	}

	#designers button,
	#team button {
		width: 300px;
		margin-right: 72px;
		margin-bottom: 48px;
	}

	#designers button:nth-of-type(3n), 
	#team button:nth-of-type(3n) {
		margin-right: 0;
	}

 }
 @media (min-width: 980px) and (max-width: 1335.9px) { /* min-content: 884px, margin: 48px */

 	#page-main > #designers,
	#page-main > #team {
		text-align: center;
		padding-bottom: 64px;
		padding-top: 48px;
	}

	#designers > h2,
	#team > h2 {
		font-size: 48px;
		line-height: 73px;
	}

	#designers > p,
	#team > p {
		margin-bottom: 80px;
	}

	#designers-container,
	#team-container {
		width: 876px;
		margin:auto;
	}

	#designers button,
	#team button {
		width: 244px;
		margin-right: 72px;
		margin-bottom: 48px;
	}

	#designers button:nth-of-type(3n), 
	#team button:nth-of-type(3n) {
		margin-right: 0;
	}
 }
 @media (min-width: 768px) and (max-width: 979.9px) { /* min-content: 672px, margin: 48px */

 	#page-main > #designers,
	#page-main > #team {
		text-align: center;
		padding-bottom: 64px;
		padding-top: 16px;
	}

	#designers > h2,
	#team > h2 {
		font-size: 36px;
		line-height: 55px;
	}

	#designers > p,
	#team > p {
		margin-bottom: 64px;
	}

	#designers-container,
	#team-container {
		width: 576px;
		margin:auto;
	}

	#designers button,
	#team button {
		width: 160px;
		margin-right: 48px;
		margin-bottom: 48px;
	}

	#designers button:nth-of-type(3n), 
	#team button:nth-of-type(3n) {
		margin-right: 0;
	}
 }
 @media (max-width: 767.9px) { /* min-content: 312px, margin: 24px */

 	#page-main > #designers,
	#page-main > #team {
		text-align: center;
		padding-bottom: 48px;
		padding-top: 16px;
	}

	#designers > h2,
	#team > h2 {
		font-size: 30px;
		line-height: 46px;
	}

	#designers > p,
	#team > p {
		margin-bottom: 64px;
	}

	#designers-container,
	#team-container {
		width: 312px;
		margin:auto;
	}

	#designers button,
	#team button {
		width: 312px;
		margin-bottom: 48px;
	}

 }