.mgg-root {
	box-sizing: border-box;
	position: relative;
	overflow-x: hidden;
}
.mgg-root *, .mgg-root *:before, .mgg-root *:after { box-sizing: border-box; }
.mgg-root img { object-fit: cover; width: 100%; max-width: 100%; height: 100%; display: inline-block; vertical-align: middle; }

.mgg-nav { z-index: 9999; position: fixed; inset: 0% 0% auto; }
.mgg-nav-top-wrapper { z-index: 2; display: flex; justify-content: center; align-items: center; width: 100%; padding: 1rem 4vw 1.25rem; position: relative; }
.mgg-nav-top { display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; }
.mgg-nav-link { color: #fff; font-family: Inconsolata, monospace; font-size: 1.25rem; text-decoration: none; overflow: hidden; }
.mgg-nav-line { width: calc(100% - 2rem); height: 1px; background-color: rgba(255, 255, 255, 0.2); position: absolute; inset: auto 0% 0% 50%; transform: translate(-50%); }

.mgg-hero-section.mgg-sticky { z-index: 1; background-color: #000; top: 0; }
.mgg-sticky { position: sticky; }
.mgg-hero-container { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; height: 100vh; position: relative; }
.mgg-hero-image-wrapper { width: 100%; height: 100%; position: absolute; }
.mgg-hero-image-wrapper img { filter: brightness(55%); object-fit: cover; width: 100%; height: 100%; }
.mgg-hero-texts { color: #fff; text-transform: uppercase; display: flex; flex-flow: column; justify-content: space-between; align-items: stretch; width: 100%; height: 100vh; padding: 5rem 3.5vw 2.5rem; font-family: Arial, sans-serif; font-size: 12vw; line-height: 1; position: relative; }

.mgg-line { will-change: transform; position: relative; }
.mgg-line-wrapper { overflow: hidden; }
.mgg-text-right { text-align: right; }
.mgg-text-center { text-align: center; }
.mgg-text-left { text-align: left; }

.mgg-work-section { position: relative; }
.mgg-work-container { position: relative; }
.mgg-work-item { z-index: 5; background-color: #000; display: flex; align-items: stretch; width: 100vw; height: 100vh; position: relative; overflow: hidden; }
.mgg-work-item-container { width: 100%; height: 100%; display: flex; position: relative; }
.mgg-work-item-background { aspect-ratio: 16 / 9; width: 100%; height: 100%; position: absolute; }
.mgg-work-item-wrapper { display: flex; flex-flow: column; flex: 1; justify-content: space-around; align-items: stretch; width: 100%; padding: 5rem 4vw 2.5rem; position: relative; }
.mgg-work-item-images { display: flex; flex-flow: row; justify-content: center; align-items: center; width: 100%; position: absolute; inset: 0% auto 0% 0%; }
.mgg-work-item-image { width: 21vw; height: 100%; position: relative; }
.mgg-image-wrapper { aspect-ratio: 4 / 5; background-color: rgba(255, 255, 255, 0.75); width: 25vw; padding: 0.35em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.mgg-work-text { flex: 1; display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; }
.mgg-work-title { color: #fff; letter-spacing: 0.5rem; text-transform: uppercase; display: flex; flex-flow: column; flex: 1; justify-content: space-between; align-items: stretch; height: 100%; margin-left: auto; margin-right: auto; font-family: Arial, sans-serif; font-size: 12.5vw; font-weight: 400; line-height: 1; position: relative; }
.mgg-work-item-overlay { z-index: 99; opacity: 0; pointer-events: none; background-color: #000; width: 105%; height: 105%; position: absolute; inset: 0%; }

.mgg-footer-section { z-index: 1; background-color: #000; position: relative; }
.mgg-footer-container { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; height: 100vh; position: relative; }
.mgg-footer-image-wrapper { width: 100%; height: 100%; position: absolute; }
.mgg-footer-image-wrapper img { opacity: 0.6; object-fit: cover; width: 100%; height: 100%; }
.mgg-footer-texts { color: #fff; letter-spacing: 0.5rem; text-transform: uppercase; display: flex; flex-flow: column; justify-content: space-between; align-items: stretch; width: 100%; height: 100%; padding: 5rem 3.5vw 2.5rem; font-family: Arial, sans-serif; font-size: 11.5vw; font-weight: 400; line-height: 1; position: relative; }

@media screen and (max-width: 767px) { .mgg-work-item-image { width: 15vw; } }
@media screen and (max-width: 479px) {
	.mgg-work-text { flex-flow: column; justify-content: space-between; align-items: flex-start; gap: 2rem; }
	.mgg-work-title { font-size: 12.5vw; }
	.mgg-hero-texts { flex-flow: column; justify-content: space-between; align-items: flex-start; gap: 2rem; }
	.mgg-footer-texts { font-size: 12.5vw; }
}