/* ======================= For me, By me ======================= */

/* Import Fonts */

	@font-face {
	    font-family: 'Sohne';
	    src: local('Söhne'),
	         url('../fonts/sohne-leicht.woff2') format('woff2');
	    font-weight: 300;
	}
	
	@font-face {
	    font-family: 'Sohne';
	    src: local('Söhne'),
	         url('../fonts/sohne-kraftig.woff2') format('woff2');
	    font-weight: 500;
	}
	
	@font-face {
	    font-family: 'The Eye Script';
	    src: url('../fonts/theeye-script.woff2') format('woff2');
	    font-weight: 300;
	}
	
/* Root */
	
	:root {    
		--color-background: #F4D5C2;
		--color-text: #222222;
		--color-blue: #F4D5C2;
		--color-dark-blue: #F09380;
		
		
		--color-charcoal: #E8E4DE;
		--color-pebble: #2D2C2D;
		--color-shadow: #555152;
		--color-pillow: #1c1c1c;				
		--color-base: #222222;

		--gutter: 20px;

		--border-10: 10px;		
		--space-10: 10px;	
		--space-20: 20px;
		--space-40: 40px;
		--space-60: 60px;		
		--space-80: 80px;	
		--space-160: 160px;	
	}
	
	@media (min-width: 720px) {
		:root { 
			--gutter: calc((20 / 1024) * 100vw);			
			
			--space-20: calc((20 / 1024) * 100vw);
			--space-40: calc((40 / 1024) * 100vw);
			--space-60: calc((60 / 1024) * 100vw);		
			--space-80: calc((80 / 1024) * 100vw);	
			--space-160: calc((160 / 1024) * 100vw);	
		}
	}
	
	@media (min-width: 1024px) {
		:root { 
			--gutter: calc((20 / 1280) * 100vw);			
			
			--space-20: calc((20 / 1280) * 100vw);
			--space-40: calc((40 / 1280) * 100vw);
			--space-60: calc((60 / 1280) * 100vw);		
			--space-80: calc((80 / 1280) * 100vw);	
			--space-160: calc((160 / 1280) * 100vw);	
		}
	}
		
	@supports (font-size: clamp(1rem, 1vi, 1rem)) {
	  :root {
			--text-footnote: clamp(0.64rem, 0.06vi + 0.63rem, 0.71rem);
			--text-body: clamp(0.86rem, 0.26vi + 0.78rem, 1.14rem);
			--text-small-subheading: clamp(1.14rem, 0.65vi + 0.96rem, 1.85rem);
			--text-small-heading: clamp(1.52rem, 1.35vi + 1.14rem, 2.99rem);
			--text-large-subheading: clamp(2.03rem, 2.59vi + 1.29rem, 4.84rem);
			--text-large-heading: clamp(2.71rem, 4.72vi + 1.36rem, 7.83rem);
	  }
	}
	
	@supports not (font-size: clamp(1rem, 1vi, 1rem)) {
	  :root {
			--text-footnote: 0.64rem;
			--text-body: 0.86rem;
			--text-small-subheading: 1.14rem;
			--text-small-heading: 1.52rem;
			--text-large-subheading: 2.03rem;
			--text-large-heading: 2.71rem;
	  }
	  @media screen and (min-width: 1920px) {
	    :root {
				--text-footnote: 0.71rem;
				--text-body: 1.14rem;
				--text-small-subheading: 1.85rem;
				--text-small-heading: 2.99rem;
				--text-large-subheading: 4.84rem;
				--text-large-heading: 7.83rem;
	    }
	  }
	}

/* Design System - Body */

	html {
		scroll-behavior: smooth;
	}

	body {
	  margin: 0;
	  width: 100%;
	  
	  font-family: Sohne;
	  font-weight: 300;
	  font-size: 12px;
	  word-break: auto-phrase;
	  background-color: var(--color-background);
	  color: var(--color-text);
	  -webkit-font-smoothing: antialiased;
	  transition: all 1s ease-in-out;
	}


body > div {
  transition: all 1s ease-in-out;
}

/* Video styling */


/* Scrollbar styles */
::-webkit-scrollbar {
  width: 8px;
  transition: all 1s ease-in-out;
}

::-webkit-scrollbar-track {
  background: var(--color-background); 
}

::-webkit-scrollbar-thumb {
  background: var(--color-pebble);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-shadow);
}

	
/* transition */
		
#transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 97;
  
  pointer-events: none;
  background: var(--color-charcoal);
  animation-duration: 1000ms;
  animation-timing-function: ease-in-out;
  opacity: 0;
}

#transition:before {
  content: 'fade'; 
}

@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

#transition.fade-out {
  animation-name: fade-out;
  opacity: 0;
}

#transition.fade-in {
  animation-name: fade-in;
  opacity: 1;
}


	
/* Design System - Main Grid & Sections */

main {
  width: calc(100% - var(--space-40));
  max-width: 2560px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-10);
}

.main-distance {
  margin-top: var(--space-160);
}

section {
  grid-column: 1 / span 2;
  display: inherit;
  grid-template-columns: inherit;
  column-gap: inherit;
  margin-top: var(--space-10);
}

@media (min-width: 320px) {
  main {
    grid-template-columns: repeat(4, 1fr);
  }

  section {
    grid-column: 1 / span 4;
    margin-top: var(--space-40);
  }
}

@media (min-width: 720px) {
  main {
    width: calc(100% - var(--space-80));
    column-gap: var(--space-20);
    grid-template-columns: repeat(8, 1fr);
  }

  section {
    grid-column: 1 / span 8;
    margin-top: var(--space-80);
  }
}

@media (min-width: 1024px) {
  main {
    grid-template-columns: repeat(12, 1fr);
  }

  section {
    grid-column: 1 / span 12;
    margin-top: var(--space-80);
  }
}

	
/* Design System - Text Styling */

/* Font styles */
.text-theeye {
  font-family: The Eye Script;
}

.text-bold {
  font-weight: 500;
}

.text-shadow {
  color: var(--color-shadow);
}

.text-large-heading {
  font-size: var(--text-large-heading);
  line-height: calc(var(--text-large-heading) * 1.1); /* This line seems redundant */
  font-weight: 500;
}

.text-large-subheading {
  font-size: var(--text-large-subheading);
  line-height: calc(var(--text-large-subheading) * 1.25);
}

.text-small-heading {
  font-size: var(--text-small-heading);
  line-height: calc(var(--text-small-heading) * 1.25);
}

.text-small-subheading {
  font-size: var(--text-small-subheading);
  line-height: calc(var(--text-small-subheading) * 1.5);
}

.text-body {
  font-size: var(--text-body);
  line-height: calc(var(--text-body) * 1.5);
}

.text-footnote {
  font-size: var(--text-footnote);
  color: var(--color-shadow);
}

.text-footnote a {
  color: var(--color-shadow);
}

.text-footnote a:before {
	background: var(--color-shadow); /* This line was moved here for consistency */
}

/* Link styles */
a {
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-pillow);
}

header a {
  color: #F6F6F6 !important;
}

a:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1.5px;
  background-color: var(--color-blue);
  bottom: -4px;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.25s ease-in-out;
}

header a:before {
  background-color: var(--color-blue) !important;
}

a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

	
/* Design System - Menu Styling */	

video {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--border-10);
}

ul {
  justify-content: start;
  padding-inline-start: 0;
  margin: 0;
  white-space: nowrap;
}

li {
  list-style-type: none;
  padding: 0;
}

ol > li {
    font-weight: 500;
    list-style-type: decimal;
}
ol > li > ul {
    font-weight: 300;
    white-space: normal;
}
	
/* Design System - Base Containers & Styling */

button.base-button {
	display: inline-block;
	background-color var(--color-pillow);
	padding: calc(var(--gutter) * 0.5) calc(var(--gutter) * 1.5);
	border-radius: calc(var(--space-40) * 2);
	border: 0;
}

.base-divider {
  width: 100%;
  height: 1.5px;
  background-color: var(--color-pebble);
  margin-bottom: var(--space-20);
}

.base-container {
  background-color: var(--color-base);
  padding: var(--space-40);
  box-sizing: border-box;
  border-radius: 8px;
}

@media (min-width: 720px) {
  .base-container {
    padding: var(--space-80);
  }
}

.base-image {
  background-position: center center;
  background-size: cover;
  border-radius: var(--border-10);
}

.base-smalltext {
  display: inline-block;
}

.base-smalltext-splitted {
  display: flex;
  gap: var(--space-40);
  white-space: normal;
}

.base-smalltext-splitted > :first-child {
  white-space: nowrap;
  margin-bottom: var(--space-40);
}

.base-introduction {
  grid-column: 7 / span 5;
}

.base-introduction-text {
  margin-top: var(--space-80);
}

.base-introduction-categories {
  display: flex;
  gap: var(--space-40);
  margin-top: var(--space-80);
}

.base-introduction-categories > div:first-child {
  width: 40%;
}

.base-introduction-categories > div {
  width: 100%;
}

@media (min-width: 320px) {
  .base-introduction {
    grid-column: 1 / span 4;
  }
}

@media (min-width: 720px) {
  .base-introduction {
    grid-column: 5 / span 4;
    margin-top: var(--space-40);
  }
  .base-introduction-categories {
    margin-top: var(--space-40);
  }
  .base-introduction-text {
    margin-top: var(--space-40);
  }
  .base-introduction-categories > div:first-child {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .base-introduction {
    grid-column: 7 / span 6;
  }
  .base-introduction-text {
    width: 80%;
  }
  .base-introduction-categories {
    width: 80%;
  }
}

	
/* Header */

header {
  position: sticky;
  top: 0;
  left: 0;
  padding-top: var(--space-40);
  color: #F6F6F6 !important;
  mix-blend-mode: difference;
  transition: all 1s ease-in-out;
  z-index: 98;
}

header > main {
  display: flex;
}

nav {
  flex: 1;
  display: flex;
  gap: var(--space-40);
}

name {
  flex: 2;
  text-align: right;
}

@media (min-width: 720px) {
  header {
    display: block;
  }
  header > main {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    column-gap: var(--space-40);
  }
  nav {
    grid-column: 1 / span 3;
  }
  name {
    grid-column: 4 / span 3;
    text-align: left;
  }
}

@media (min-width: 1024px) {
  header > main {
    grid-template-columns: repeat(12, 1fr);
  }
  nav {
    grid-column: 1 / span 6;
  }
  name {
    grid-column: 7 / span 6;
  }
}


/* The Sanctuary */

.thesanctuary-concept {
  grid-column: 1 / span 2;
}

.thesanctuary-concept-image {
  background-image: url("../images/thesanctuary-concept.png");
  margin-bottom: var(--space-40);
  padding-top: calc((685 / 1189) * 100%);
}

.thesanctuary-concept-text {
  width: 100%;
}

.thesanctuary-books {
  grid-column: 1 / span 2;
  display: inline-block;
}

.thesanctuary-container {
  grid-column: 1 / span 2;
  display: inline-block;
}

.thesanctuary-container:first-child > .base-container {
  margin-bottom: var(--space-40);
}

.thesanctuary-books-container > .base-container {
  padding: var(--space-20);
  margin-bottom: var(--space-40);
}

.thesanctuary-books-brief {
  background-image: url("../images/thesanctuary-books-brief.png");
  padding-top: calc((442 / 706) * 100%);
}

.thesanctuary-books-exploration {
  background-image: url("../images/thesanctuary-books-exploration.png");
  padding-top: calc((442 / 706) * 100%);
}

.thesanctuary-explainer {
  width: 100%;
  margin-bottom: var(--space-40);
}

.thesanctuary-explainer > .text-large-heading {
  margin-bottom: var(--space-20);
}

.thesanctuary-doubleimage {
  width: 100%;
}

.thesanctuary-doubleimage > .base-container {
  margin-bottom: var(--space-20);
  padding: 0;
}

.thesanctuary-emporium-hero {
  background-image: url("../images/thesanctuary-emporium-hero.png");
  padding-top: calc((728 / 1190) * 100%);
  margin-bottom: var(--space-20);
}

.thesanctuary-emporium-app {
  background-image: url("../images/thesanctuary-emporium-app.png");
  padding-top: calc((358 / 585) * 100%);
}

.thesanctuary-emporium-tech {
  background-image: url("../images/thesanctuary-emporium-tech.png");
  padding-top: calc((358 / 585) * 100%);
}

.thesanctuary-atheneum-room {
  background-image: url("../images/thesanctuary-atheneum-room.png");
  padding-top: calc((506 / 706) * 100%);
}

.thesanctuary-atheneum-bench {
  background-image: url("../images/thesanctuary-atheneum-bench.png");
  padding-top: calc((506 / 706) * 100%);
}

.thesanctuary-thermae-hero {
  background-image: url("../images/thesanctuary-thermae-hero.png");
  padding-top: calc((728 / 1190) * 100%);
}

@media (min-width: 320px) {
  .thesanctuary-container {
    grid-column: 1 / span 4;
  }
  .thesanctuary-concept {
    grid-column: 1 / span 4;
  }
  .thesanctuary-books {
    grid-column: 1 / span 4;
  }
}

@media (min-width: 720px) {
  .thesanctuary-container {
    grid-column: 1 / span 8;
  }
  .thesanctuary-doubleimage {
    display: flex;
    gap: var(--space-20);
  }
  .thesanctuary-doubleimage > .base-container {
    flex-grow: 1;
    flex-basis: 0;
    padding: 0;
  }
  .thesanctuary-explainer {
    width: calc(75% - var(--space-20));
    margin-bottom: var(--space-40);
  }
  .thesanctuary-concept {
    grid-column: 2 / span 6;
  }
  .thesanctuary-concept-text {
    width: calc(50% - 20px);
  }
  .thesanctuary-books {
    grid-column: 1 / span 8;
    display: flex;
    gap: var(--space-20);
  }
  .thesanctuary-books > div {
    flex-grow: 1;
    flex-basis: 0;
  }
}

@media (min-width: 1024px) {
  .thesanctuary-container {
    grid-column: 2 / span 10;
  }
  .thesanctuary-concept {
    grid-column: 2 / span 10;
  }
  .thesanctuary-concept-text {
    width: calc(50% - 20px);
  }
  .thesanctuary-books {
    grid-column: 2 / span 10;
  }
}
	
/* Marie-Stella-Maris */	
.marie-windows-container {
  grid-column: 1 / span 2;
}

.marie-windows > .base-smalltext {
  grid-column: 1 / span 2;
  margin-top: var(--space-40);
}

.marie-windows-container > .base-container {
  padding: 0;
}

.marie-print > .base-smalltext {
  grid-column: 1 / span 2;
  margin-top: var(--space-40);
}

.marie-print-container {
  grid-column: 1 / span 2;
}

.marie-print-image {
  background-image: url("../images/marie-print.png");
  padding-top: calc((285 / 1272) * 100%);
  margin: var(--space-160) 0;
}

.marie-ing-container {
  grid-column: 1 / span 2;
}

.marie-ing-container > .base-container {
  padding: 0;
}

.marie-ing-image {
  background-image: url("../images/marie-ing.png");
  padding-top: calc((446 / 343) * 100%);
  margin-bottom: var(--space-40);
}

.marie-iha-container {
  grid-column: 1 / span 2;
}

.marie-iha-container > .base-container {
  padding: 0;
}

.marie-iha-image {
  background-image: url("../images/marie-iha.png");
  padding-top: calc((626 / 760) * 100%);
  margin: var(--space-40) 0;
}

.marie-digital > .base-smalltext {
  grid-column: 1 / span 2;
  margin-top: var(--space-40);
}

.marie-digital-container {
  grid-column: 1 / span 2;
}

.marie-digital-image {
  background-image: url("../images/marie-stories.png");
  padding-top: calc((531 / 948) * 100%);
  margin: var(--space-80) 0;
  border-radius: 0;
}

@media (min-width: 320px) {
  .marie-windows-container {
    grid-column: 1 / span 4;
  }
  .marie-windows > .base-smalltext {
    grid-column: 1 / span 4;
  }
  .marie-print > .base-smalltext {
    grid-column: 2 / span 3;
  }
  .marie-print-container {
    grid-column: 1 / span 4;
  }
  .marie-print-image {
    margin: var(--space-80) 0;
  }
  .marie-iha-container {
    grid-column: 2 / span 3;
  }
  .marie-digital > .base-smalltext {
    grid-column: 1 / span 3;
  }
  .marie-digital-container {
    grid-column: 1 / span 4;
  }
  .marie-digital-image {
    margin: 0;
  }
}

@media (min-width: 720px) {
  .marie-windows-container {
    grid-column: 2 / span 6;
  }
  .marie-windows > .base-smalltext {
    grid-column: 2 / span 4;
  }
  .marie-print > .base-smalltext {
    grid-column: 3 / span 6;
  }
  .marie-print-container {
    grid-column: 1 / span 8;
  }
  .marie-ing-container {
    grid-column: 1 / span 3;
  }
  .marie-iha-container {
    grid-column: 5 / span 4;
    margin-top: 0;
  }
  .marie-iha-image {
    margin: 0 0 var(--space-40) 0;
  }
  .marie-digital > .base-smalltext {
    grid-column: 5 / span 4;
  }
  .marie-digital-container {
    grid-column: 1 / span 8;
  }
}

@media (min-width: 1024px) {
  .marie-windows-container {
    grid-column: 3 / span 8;
  }
  .marie-windows > .base-smalltext {
    grid-column: 3 / span 4;
  }
  .marie-windows-container > .base-container {
    padding: 0;
  }
  .marie-print > .base-smalltext {
    grid-column: 8 / span 5;
  }
  .marie-print-container {
    grid-column: 1 / span 12;
  }
  .marie-ing-container {
    grid-column: 2 / span 3;
  }
  .marie-iha-container {
    grid-column: 6 / span 6;
  }
  .marie-digital > .base-smalltext {
    grid-column: 7 / span 5;
  }
  .marie-digital-container {
    grid-column: 2 / span 10;
  }
}

/* THE EYE */	
	
.theeye-motion-container {
    grid-column: 1 / span 2;
}

.theeye-motion > .base-smalltext {
    grid-column: 1 / span 2;
    margin-top: var(--space-40);
}

.theeye-motion-container > .base-container {
    padding: 0;
}

.theeye-font > .base-smalltext {
    grid-column: 1 / span 2;
    margin-top: var(--space-40);
}

.theeye-font-container {
    grid-column: 1 / span 2;
}

.theeye-font-container > .base-container {
    background-color: #1A00E0;
}

.theeye-font-image {
    background-image: url("../images/theeye-font.png");
    padding-top: calc((472/993)*100%);
    border-radius: 0;
}

.theeye-app-container {
    grid-column: 1 / span 2;
}

.theeye-app > .base-smalltext {
    grid-column: 1 / span 2;
    margin-top: var(--space-40);
}

.theeye-app-image {
    background-image: url("../images/theeye-app.png");
    padding-top: calc((503/990)*100%);
    border-radius: 0;
}

@media (min-width: 320px) {
    .theeye-motion-container {
        grid-column: 1 / span 4;
    }

    .theeye-motion > .base-smalltext {
        grid-column: 1 / span 4;
    }

    .theeye-font > .base-smalltext {
        grid-column: 1 / span 4;
        margin-top: var(--space-40);
    }

    .theeye-font-container {
        grid-column: 1 / span 4;
    }
    
    .theeye-app > .base-smalltext {
        grid-column: 1 / span 4;
        margin-top: var(--space-40);
    }

    .theeye-app-container {
        grid-column: 1 / span 4;
    }
}

@media (min-width: 720px) {
    .theeye-motion-container {
        grid-column: 2 / span 6;
    }

    .theeye-motion > .base-smalltext {
        grid-column: 2 / span 5;
        margin-top: var(--space-40);
    }

    .theeye-font > .base-smalltext {
        grid-column: 4 / span 5;
        margin-top: var(--space-40);
    }

    .theeye-font-container {
        grid-column: 1 / span 8;
    }

    .theeye-app > .base-smalltext {
        grid-column: 2 / span 5;
        margin-top: var(--space-40);
    }

    .theeye-app-container {
        grid-column: 2 / span 6;
    }
}


@media (min-width: 1024px) {
    .theeye-motion-container {
        grid-column: 3 / span 8;
    }

    .theeye-motion > .base-smalltext {
        grid-column: 3 / span 4;
    }

    .theeye-font > .base-smalltext {
        grid-column: 8 / span 4;
        margin-top: var(--space-40);
    }

    .theeye-font-container {
        grid-column: 2 / span 10;
    }

    .theeye-app > .base-smalltext {
        grid-column: 3 / span 4;
        margin-top: var(--space-40);
    }

    .theeye-app-container {
        grid-column: 3 / span 8;
    }
}



	
	
/* Meadow of Sweden */	
.mos-introduction-container > .base-smalltext {
    grid-column: 2 / span 6;
    margin-top: var(--space-40);
}

.mos-introduction {
    grid-column: 2 / span 10;
}

.mos-introduction > .base-container {
    padding: var(--space-80);
}

.mos-introduction-logo {
    background-image: url("../images/mos-logo.png");
    padding-top: calc((278/584)*100%);
}

.mos-graphicdesign-container {
    grid-column: 2 / span 3;
    margin-bottom: var(--space-40);
}

.mos-graphicdesign-container > .base-container {
    padding: var(--space-80);
    margin-bottom: var(--space-40);
}

.mos-graphicdesign-image {
    background-image: url("../images/mos-knoop.png");
    padding-top: calc((173/173)*100%);
}

.mos-store-container {
    grid-column: 6 / span 6;
}

.mos-store-container > .base-container {
    padding: var(--space-40) var(--space-80);
    margin-bottom: var(--space-40);
}

.mos-store-container > .base-smalltext {
    width: 100%;
}

.mos-store-image {
    background-image: url("../images/mos-exterieur.png");
    padding-top: calc((501/357)*100%);
    border-radius: 0;
}

.mos-inside-container {
    grid-column: 3 / span 8;
}

.mos-inside-container > .base-image {
    margin-bottom: var(--space-40);
}

.mos-inside-container > .base-smalltext {
    width: 100%;
}

.mos-inside-image {
    background-image: url("../images/mos-interieur.png");
    padding-top: calc((588/948)*100%);
    border-radius: 0;
}

.mos-moodboard-container {
    grid-column: 2 / span 3;
    margin-bottom: var(--space-40);
}

.mos-moodboard-container > .base-container {
    padding: 0;
    margin-bottom: var(--space-40);
}

.mos-moodboard-container > .base-smalltext {
    width: 100%;
}

.mos-moodboard-image {
    background-image: url("../images/mos-moodboard.png");
    padding-top: calc((485/585)*100%);
}

.mos-deliverables-container {
    grid-column: 6 / span 6;
}

.mos-deliverables-container > .base-container {
    padding: 0;
    margin-bottom: var(--space-40);
}

.mos-moodboard-container > .base-smalltext {
    width: 100%;
}

.mos-deliverables-image {
    background-image: url("../images/mos-deliverables.png");
    padding-top: calc((485/585)*100%);
}

@media (min-width: 320px) {
    .mos-introduction-container > .base-smalltext {
        grid-column: 1 / span 4;
    }

    .mos-introduction {
        grid-column: 1 / span 4;
    }

    .mos-introduction-logo {
        grid-column: 1 / span 4;
    }

    .mos-graphicdesign-container {
        grid-column: 1 / span 4;
    }

    .mos-store-container {
        grid-column: 1 / span 4;
    }

    .mos-inside-container {
        grid-column: 1 / span 4;
    }

    .mos-moodboard-container {
        grid-column: 1 / span 4;
    }

    .mos-deliverables-container {
        grid-column: 1 / span 4;
    }
}

@media (min-width: 720px) {
    .mos-introduction-container > .base-smalltext {
        grid-column: 2 / span 6;
    }

    .mos-introduction {
        grid-column: 2 / span 6;
    }

    .mos-introduction > .base-container {
        padding: var(--space-160);
    }

    .mos-graphicdesign-container {
        grid-column: 1 / span 3;
    }
    
	.mos-graphicdesign-container > .base-container {
	    padding: var(--space-160);
	    margin-bottom: var(--space-40);
	}
    
	.mos-graphicdesign-container > .base-smalltext {
	    width: calc(75% - var(--space-10));
	}


    .mos-graphicdesign-container > .base-container {
        padding: var(--space-80);
        margin-bottom: var(--space-40);
    }

    .mos-store-container {
        grid-column: 4 / span 5;
    }
    
	.mos-store-container > .base-container {
	    padding: var(--space-80) var(--space-160);
	    margin-bottom: var(--space-40);
	}
    
	.mos-store-container > .base-smalltext {
	    width: calc(50% - var(--space-10));
	}

    .mos-inside-container {
        grid-column: 1 / span 8;
    }
 
	.mos-inside-container > .base-smalltext {
	    width: calc(50% - var(--space-10));
	}

    .mos-moodboard-container {
        grid-column: 1 / span 4;
    }
    
    .mos-moodboard-container > .base-smalltext {
	    width: calc(50% - var(--space-10));
    }

    .mos-deliverables-container {
        grid-column: 5 / span 4;
    }
    
    .mos-deliverables-container > .base-smalltext {
	    width: calc(50% - var(--space-10));
    }
}

@media (min-width: 1024px) {
    .mos-introduction-container > .base-smalltext {
        grid-column: 3 / span 5;
    }

    .mos-introduction {
        grid-column: 3 / span 8;
    }

    .mos-graphicdesign-container {
        grid-column: 2 / span 3;
    }

    .mos-store-container {
        grid-column: 6 / span 6;
    }

    .mos-inside-container {
        grid-column: 3 / span 8;
    }

    .mos-moodboard-container {
        grid-column: 2 / span 5;
    }

    .mos-deliverables-container {
        grid-column: 7 / span 5;
    }
}


	
	
/* About Me */

.aboutme-introduction {
    grid-column: 1 / span 2;
    margin-bottom: var(--space-40);
}

.aboutme-image {
    background-image: url("../images/aboutme-image.jpg");
    grid-column: 1 / span 2;
    padding-top: calc((427/343)*100%);
}

.aboutme-facts {
    grid-column: 1 / span 2;
    display: flex;
    gap: var(--space-40);
}

.aboutme-facts > .base-container {
    flex-grow: 1;
    flex-basis: 0;
    margin-bottom: var(--space-20);
    padding: var(--space-40);
    align-content: center;
}

.aboutme-facts > .aboutme-container {
    flex-grow: 1;
    flex-basis: 0;
}

.aboutme-facts > .lego {
    display: none;
}

.aboutme-facts-movie {
    background-image: url("../images/aboutme-movie.jpg");
    padding-top: calc((311/225)*100%);
    border-radius: 4px;
}

.aboutme-facts-album {
    background-image: url("../images/aboutme-album.png");
    padding-top: calc((197/258)*100%);
}

.aboutme-facts-lego {
    background-image: url("../images/aboutme-lego.png");
    padding-top: calc((197/258)*100%);
}

@media (min-width: 320px) {
    .aboutme-introduction {
        grid-column: 1 / span 4;
    }
    .aboutme-image {
        grid-column: 1 / span 4;
    }
    .aboutme-facts {
        grid-column: 1 / span 4;
    }
}

@media (min-width: 720px) {
    .aboutme-introduction {
        grid-column: 2 / span 6;
    }
    .aboutme-image {
        grid-column: 2 / span 6;
    }
    .aboutme-facts {
        grid-column: 1 / span 8;
    }
    .aboutme-facts > .lego {
        display: block;
    }
}

@media (min-width: 1024px) {
    .aboutme-introduction {
        grid-column: 2 / span 6;
    }
    .aboutme-image {
        grid-column: 9 / span 3;
    }
    .aboutme-facts {
        grid-column: 2 / span 10;
    }
}

/* Footer */

footer {
  background-color: var(--color-base);
  margin-top: var(--space-160);
  padding: var(--space-40) 0 var(--space-20) 0;
  transition: all 1s ease-in-out;
}

.footer-reachout {
  grid-column: 1 / span 6;
  margin-bottom: var(--space-160);
}

.footer-reachout > .text-large-subheading {
  margin-bottom: var(--space-20);
}

.footer-copyright {
  grid-column: 1 / span 2;
}

.footer-copyright::before {
  content: "© 2024";
}

.footer-instagram {
  grid-column: 3 / span 1;
}

.footer-linkedin {
  grid-column: 4 / span 1;
}

.footer-applemusic {
  grid-column: 5 / span 1;
}

.footer-backtotop {
  grid-column: 11 / span 2;
  text-align: right;
}

/* Responsive Styles */

@media (min-width: 320px) {
  .footer-reachout {
    grid-column: 1 / span 4;
  }
  
  .footer-copyright {
    grid-column: 1 / span 1;
  }
  
  .footer-instagram {
    grid-column: 2 / span 1;
  }
  
  .footer-linkedin {
    grid-column: 3 / span 1;
  }
  
  .footer-applemusic {
    display: none;
  }
  
  .footer-backtotop {
    grid-column: 4 / span 1;
  }
}

@media (min-width: 720px) {
  .footer-reachout {
    grid-column: 1 / span 8;
  }
  
  .footer-copyright {
    grid-column: 1 / span 1;
  }
  
  .footer-instagram {
    grid-column: 2 / span 1;
  }
  
  .footer-linkedin {
    grid-column: 3 / span 1;
  }
  
  .footer-applemusic {
    display: block;
    grid-column: 4 / span 1;
  }
  
  .footer-backtotop {
    grid-column: 8 / span 1;
  }
}

@media (min-width: 1024px) {
  .footer-reachout {
    grid-column: 1 / span 6;
  }
  
  .footer-copyright {
    grid-column: 1 / span 2;
  }
  
  .footer-copyright::before {
    content: "© 2024 All Rights Reserved";
  }
  
  .footer-instagram {
    grid-column: 3 / span 1;
  }
  
  .footer-linkedin {
    grid-column: 4 / span 1;
  }
  
  .footer-applemusic {
    grid-column: 5 / span 1;
  }
  
  .footer-backtotop {
    grid-column: 11 / span 2;
  }
}

	.hide-tablet {
		display: block;
	}
	
	.hide-mobile {
		display: none;
	}

.index-hero {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: var(--color-dark-blue);
    display: flex;
    align-items: flex-end;
}

.index-hero-text {
    padding: var(--space-20);
    width: 75%;
	color: var(--color-blue);
}

.index-hero-scrolldown {
    position: absolute;
    right: 0;
    justify-self: right;
    padding: var(--space-20);
    animation: movingarrow 1.5s ease-in-out infinite;
}

@keyframes movingarrow {
    0% { bottom: 0; }
    50% { bottom: var(--space-20); }
    100% { bottom: 0; }
}

.index-afterhero {
    margin-top: 100vh;
}

.index-title {
    grid-column: 1 / span 2;
    margin-bottom: var(--space-80);
}

.index-divider {
    grid-column: 1 / span 2;
    width: 100%;
    height: 1.5px;
    background-color: var(--color-pillow);
}

.index-project {
    grid-column: 1 / span 2;
    display: flex;
    padding: var(--space-20) 0px;
}

.index-project > .text-large-subheading {
    line-height: calc(var(--text-large-subheading) * 1); /* This line seems redundant */
}

.index-project > .text-small-subheading {
    line-height: calc(var(--text-large-subheading) * 1); /* This line seems redundant */
}

.index-project-link {
    margin-left: 0;
}

@media (min-width: 320px) {
    .index-hero-text {
        padding: var(--space-20);
        width: 75%;
    }

    .index-project {
        flex-direction: column;
        grid-column: 1 / span 4;
        gap: var(--space-10);
        padding: var(--space-20) 0px;
    }

    .index-project > .text-large-subheading {
        align-self: left;
    }

    .index-project > .text-small-subheading {
        align-self: left;
    }

    .index-title {
        grid-column: 1 / span 4;
        margin-bottom: var(--space-40);
    }

    .index-divider {
        grid-column: 1 / span 4;
    }
}

@media (min-width: 720px) {
	.hide-mobile {
		display: block;
	}	
	
	.hide-tablet {
		display: none;
	}
    .index-hero-text {
        padding: var(--space-40);
        width: 100%;
    }

    .index-hero-scrolldown {
        padding: var(--space-40);
    }

    .index-project {
        flex-direction: row;
        gap: var(--space-40);
    }

    .index-project > .text-large-subheading {
        align-self: center;
    }

    .index-project > .text-small-subheading {
        align-self: center;
    }

    .index-title {
        grid-column: 1 / span 8;
        margin-bottom: var(--space-80);
    }

    .index-divider {
        grid-column: 1 / span 8;
    }

    .index-project {
        grid-column: 1 / span 8;
        gap: var(--space-40);
        padding: var(--space-20) 0px;
    }

    .index-project-link {
        margin-left: auto;
    }
}

@media (min-width: 1024px) {
	.hide-tablet {
		display: block;
	}
    .index-title {
        grid-column: 1 / span 12;
    }

    .index-divider {
        grid-column: 1 / span 12;
    }

    .index-project {
        grid-column: 1 / span 12;
    }
}