@font-face {
	font-family: "PublicTextMono";
	src: url(fonts/PublicoTextMonoLC-Roman.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
:root {
	--left: 20px;
	--top: 20px;
	--right: 20px;
	--logo-menu-gap: 0px;
	--menu-gallery-gap: 33px;
	--grid-col-gap: 20px;
	--grid-row-gap: 48px;
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	overflow-x: hidden;
}

body {
	font-family: "PublicTextMono", monospace;
	max-width: 1800px;
	margin: 0 auto;
	padding: 0;
}

body::-webkit-scrollbar {
	width: 0px;
}

.page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.page > main {
	flex: 1;
}

/* common containers */
.site-header,
.main-nav,
.content,
.footer {
	width: 100%;
	max-width: 1800px;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
.site-header {
	margin-top: var(--top);
	background: transparent;
}

.brand-line {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0;
}

.brand-logo-link {
	margin: 0;
}

.brand-logo {
	display: block;
	width: 93px;
	height: auto;
}

.brand-mark {
	display: block;
	width: 61px;
	height: 40px;
	margin: 0;
}

.main-nav {
	margin-top: var(--logo-menu-gap);
	padding-top: 0;
	padding-bottom: 0;
	background: none;
}

.main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-nav li {
	font-size: 11px;
	line-height: 16px;
}

.main-nav a {
	text-decoration: none;
	color: #bdbdbd;
}

.main-nav a:hover,
.main-nav a.active {
	color: #000;
}

.content {
	margin-top: var(--menu-gallery-gap);
	flex: 1;
}
.content--full-right {
	padding-right: 0;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 10px;
	row-gap: var(--grid-row-gap);
	padding: 0;
	margin: 0;
	justify-content: start;
}

.gallery-item {
	text-decoration: none;
	color: #000;
}

.product {
	margin: 0;
	text-align: left;
}

.product-header {
	margin: 0 0 11px 0;
}

.product-header p {
	margin: 0;
	font-size: 11px;
	line-height: 14px;
}

.product-images {
	display: block;
	width: 100%;
	margin: 0;
	overflow: visible;
}
.product-images .img {
	width: 100%;
	aspect-ratio: 2/3;
	overflow: hidden;
}
.product-images img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.07);
}

.project-layout {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 118px;
	box-sizing: border-box;
	min-height: 0;
}

.left-wrapper {
	flex: 0 0 300px;
	width: 300px;
	font-size: 11px;
	line-height: 14px;
	color: #1a1a1a;
}

.product-title {
	margin: 0 0 11px 0;
	font-size: 11px;
	line-height: 14px;
	font-weight: 400;
}

.left-wrapper p {
	margin: 0 0 11px 0;
}

.warning {
	color: #8d8d8d;
}

.carebutton {
	display: inline-block;
	margin-top: 8px;
	padding: 4px 30px;
	border: 0.7px solid #1d1d1d;
	text-decoration: none;
	color: #1a1a1a;
	font-size: 11px;
	line-height: 14px;
	background: transparent;
}

.carebutton:hover {
	background: #ececec;
}

.right-wrapper {
	flex: 1 1 auto;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: none;
	overscroll-behavior-x: contain;
	overscroll-behavior-y: none;
	min-width: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: auto;
}

.right-wrapper::-webkit-scrollbar {
	display: none;
}

.right-wrapper img {
	flex: 0 0 auto;
	scroll-snap-align: start;
	display: block;
	height: min(70vh);
	width: auto;
	object-fit: cover;
	scroll-snap-align: none;
}

.footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 10px;
	padding-bottom: 18px;
}

.footer p,
.footerbutton {
	margin: 0;
	font-family: "PublicTextMono";
	font-size: 11px;
	color: #bdbdbd;
	text-decoration: none;
}

.footer-shop {
	padding-left: 20px;
	padding-right: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	padding-top: 38px;
	padding-bottom: 18px;
}
.footer-shop p,
.footer-shop button {
	margin: 0;
	font-family: "PublicTextMono";
	font-size: 11px;
	color: #bdbdbd;
	text-decoration: none;
}
.year {
	color: #bdbdbd;
}

@media (min-width: 1024px) {
	.gallery {
		grid-template-columns: repeat(5, 1fr);
		column-gap: var(--grid-col-gap);
		row-gap: var(--grid-row-gap);
	}

	.project-layout {
		flex-direction: row;
		gap: 118px;
	}
	.product-images .img {
		width: 100%;
		aspect-ratio: 2/3;
	}
	.product-images img {
		transform: none;
	}

	.left-wrapper {
		flex: 0 0 300px;
		width: 300px;
	}
}