:root {
  --padding-block-s: 1.5rem;
  --padding-block-l: 1.5rem;

  --padding-menu-item: 1.25rem 3.5rem 1rem 2rem;

  --site-content: 1200px;
  --site-padding: 2rem;
  --site-padding-min: 1rem;
}

@media (min-width: 800px) {
  :root {
    --padding-block-s: 1.75rem;
    --padding-block-l: 2.5rem;

    --padding-menu-item: 1.75rem 4.5rem 1.5rem 3rem;

    --site-padding: 3rem;
  }
}

@media screen and (min-width: 1200px) {
  :root {
    --padding-block-l: 3.5rem;
    --site-padding: 4rem;
  }
}

/*
 .oooooo..o  o8o      .             
d8P'    `Y8  `"'    .o8             
Y88bo.      oooo  .o888oo  .ooooo.  
 `"Y8888o.  `888    888   d88' `88b 
     `"Y88b  888    888   888ooo888 
oo     .d8P  888    888 . 888    .o 
8""88888P'  o888o   "888" `Y8bod8P' 
*/                                                                    

body {
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  grid-template-columns: 100%;
  grid-template-areas: "header" "navigation" "main" "footer";
}

.site-header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
}

.site-navigation {
  grid-area: navigation;
}

.site-main {
  grid-area: main;
}

.site-footer {
  grid-area: footer;
  align-self: end;
}


/*
ooooo   ooooo                           .o8                     
`888'   `888'                          "888                     
 888     888   .ooooo.   .oooo.    .oooo888   .ooooo.  oooo d8b 
 888ooooo888  d88' `88b `P  )88b  d88' `888  d88' `88b `888""8P 
 888     888  888ooo888  .oP"888  888   888  888ooo888  888     
 888     888  888    .o d8(  888  888   888  888    .o  888     
o888o   o888o `Y8bod8P' `Y888""8o `Y8bod88P" `Y8bod8P' d888b    
*/                

.site-logo {
  margin-bottom: 0;
} 

.header-links {
  display: flex;
  align-items: center;
  gap: 1rem;
	margin-right: -0.375rem;
}

.site-header {
  padding-inline: var(--site-padding);
  padding-block: var(--padding-block-s);
}

@media (min-width: 800px) {
  .site-header {
    padding-block: var(--padding-block-s);
  } 
}

@media (min-width: 1200px) {
  .site-header {
    padding-inline: 3rem;
  } 
}

/*
ooooooooo.                                       ooooo   ooooo                           .o8                     
`888   `Y88.                                     `888'   `888'                          "888                     
 888   .d88'  .oooo.    .oooooooo  .ooooo.        888     888   .ooooo.   .oooo.    .oooo888   .ooooo.  oooo d8b 
 888ooo88P'  `P  )88b  888' `88b  d88' `88b       888ooooo888  d88' `88b `P  )88b  d88' `888  d88' `88b `888""8P 
 888          .oP"888  888   888  888ooo888       888     888  888ooo888  .oP"888  888   888  888ooo888  888     
 888         d8(  888  `88bod8P'  888    .o       888     888  888    .o d8(  888  888   888  888    .o  888     
o888o        `Y888""8o `8oooooo.  `Y8bod8P'      o888o   o888o `Y8bod8P' `Y888""8o `Y8bod88P" `Y8bod8P' d888b    
                       d"     YD                                                                                 
                       "Y88888P'                                                                                 
 */                                                                                                                                                               

.page-header {
  padding-block: var(--padding-block-l) calc(5 * var(--padding-block-l));
  position: relative;
  padding-inline: var(--site-padding);
}

@media screen and (min-width: 640px) {
  .page-header {
    padding-block: var(--padding-block-l) calc(3 * var(--padding-block-l));
  }
}

.page-header > .page-title,
.page-header > .page-subtitle {
  max-width: 900px;
}

.home-header {
	min-height: calc(100vh - 19.25rem);
}

@media screen and (min-width: 640px) {
  .site-main > .home-header {
    padding-block: calc(var(--padding-block-l) * 1.375);
  }
}


.language-navigation {
  padding-inline: var(--site-padding);
  padding-block: 1.25rem 1rem;
  border-top: var(--border);
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}

@media screen and (min-width: 640px) {
  .language-navigation {
    padding: 1.25rem 2.25rem 1rem 2rem;
    border-bottom: var(--border);
    left: auto;
    bottom: auto;
    top: 0;
    border-top: 0;
  }
}


@media (min-width: 800px) {
  .language-navigation {
    padding: 1.75rem 3.25rem 1.5rem 3rem;
	}
}

.language-navigation-menu {
  display: flex;
	background-image: url('../img/icon-language.svg');
	gap: 1.25rem;
	background-position: left calc(50% - 1px);
	padding-left: 1.75rem;
}


/*
ooo        ooooo            o8o              
`88.       .888'            `"'              
 888b     d'888   .oooo.   oooo  ooo. .oo.   
 8 Y88. .P  888  `P  )88b  `888  `888P"Y88b  
 8  `888'   888   .oP"888   888   888   888  
 8    Y     888  d8(  888   888   888   888  
o8o        o888o `Y888""8o o888o o888o o888o 
*/                                           

.page-section {
  display: flex;
  flex-direction: column-reverse;
}

#home-layout-packaging {
  flex-direction: column;
}
                                             
@media screen and (min-width: 640px) {
  
  .page-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .page-section > .span-2 {
    grid-column: span 2;
  }

}  

/*
oooooooooooo   .oooooo.     .oooooo.   ooooooooooooo oooooooooooo ooooooooo.   
`888'     `8  d8P'  `Y8b   d8P'  `Y8b  8'   888   `8 `888'     `8 `888   `Y88. 
 888         888      888 888      888      888       888          888   .d88' 
 888oooo8    888      888 888      888      888       888oooo8     888ooo88P'  
 888    "    888      888 888      888      888       888    "     888`88b.    
 888         `88b    d88' `88b    d88'      888       888       o  888  `88b.  
o888o         `Y8bood8P'   `Y8bood8P'      o888o     o888ooooood8 o888o  o888o 
*/                                                                               
                                                                                                                                                            
.site-footer > .footer-section {
  padding-inline: var(--site-padding);
}