* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'Staatliches';
  src: url('/assets/fonts/Staatliches-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;  /* Improves loading */
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;  /* Improves loading */
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;  /* Improves loading */
}

:root {
  --padding: 1.5rem;

  --color-red: #E92432;
  --color-yellow: #FFAD1C;
  --color-white-pure: #FFFFFF;
  --color-white-flying: #FCFCFC;
  --color-grey-mid: #C3C3C3;
  --color-purple: #977EC3;
  --color-blue: #5B62A4;
  --color-grey-dark: #323232;
  --color-black: #000000;

  --color-menu-background: #000000AA;
  --color-overlay-background: #00000055;

  --font-weight-bold: 600;
  --font-weight-black: 900;

  --font-size-small: 0.87rem; /* 13 */
  --font-size-base: 1.07rem; /* 16 */
  --font-size-title: 1.07rem; /* 16 */
  --font-size-big: 1.88rem; /* 28 */
  --font-size-huge: 2.55rem; /* 38 */
  --font-size-menu: 2.55rem; /* 38 */

  --font-family-regular: 'Inter', sans-serif;
  --font-family-title: 'Staatliches', sans-serif;


  --grid-splash: col1 / col13;

  --grid-content-full: col2 / col12;
  --grid-content-full-thin: col3 / col11;

  --grid-content-left: col2 / col7;
  --grid-content-left-thiner: col2 / col6;
  --grid-content-left-larger: col2 / col9;
  --grid-content-left-maxima: col2 / col11;

  --grid-content-right: col7 / col12;
  --grid-content-right-minima: col1 / col12;
  --grid-content-right-thiner: col9 / col12;
  --grid-content-right-larger: col6 / col12;

  --border-fullscreen-width: 20px;
  --border-fullscreen: var(--border-fullscreen-width) var(--color-white-pure) solid;
  --border-yellow: 2px var(--color-yellow) solid;

  --padding-top-content: 200px;

  --transition-quick: 0.2s;
}


@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }
}

@media (max-width: 768px) {
  :root {
    --grid-content-full: col1 / col13;
    --grid-content-full-thin: col3 / col11;

    --grid-content-left: col1 / col13;
    --grid-content-left-thiner: col1 / col13;
    --grid-content-left-larger: col1 / col13;
    --grid-content-left-maxima: col1 / col13;

    --grid-content-right: col1 / col13;
    --grid-content-right-minima: col1 / col13;
    --grid-content-right-thiner: col1 / col13;
    --grid-content-right-larger: col1 / col13;

    --border-fullscreen-width: 0px;

    --font-size-small: 0.87rem; /* 13 */
    --font-size-base: 1.07rem; /* 16 */
    --font-size-title: 1.60rem; /* 24 */
    --font-size-big: 1.88rem; /* 28 */
    --font-size-huge: 2.15rem; /* 32 */
    --font-size-menu: 2.55rem; /* 38 */
  }

  .desktop-only {
    display: none !important;
  }

  .opacity-hover {
    opacity: 1 !important;
  }

  body > header, body > main > section, section.splash-card, section.splash-screen, body > main > footer, .socialmedia-overlay {
    grid-gap: 0px !important;
  }

  nav.menu {
    grid-column: col11 / col13 !important;
  }

  #main-menu {
    padding-top: 100px !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
    padding-left: 30% !important;
  }

  #menu-toggle:checked ~ #main-menu {
    display: flex !important;
  }

  .logo {
    grid-column: col1 / col10 !important;
  }

  body > main > footer > nav, body > main > footer .logo {
    grid-column: col1 / col13 !important;
  }

  body > main > footer * {
    text-align: center !important;
    justify-content: center !important;
  }

  section.splash-card .background {
    filter: blur(20px);
  }

  section#intro div {
    padding: 0 !important;
    align-self: center !important;
    margin-top: 100px;
  }

  section#intro div video {
    position: relative;
    width: 100vw;
    object-fit: cover;
    object-position: center;
  }

  @-moz-document url-prefix() {
    /* CSS rules here will only apply in Firefox */
    section#intro div video {
      translate: -21px /*calc(-1 * var(--border-fullscreen-width)) ToDo: why? */ 0;
    }
  }
  

  section#intro div p {
    padding: 16px;
  }

  section#services div li {
    flex-wrap: wrap !important;
    flex-direction: column !important;
  }

  section#services div li div {
    opacity: 1 !important; 
    color: var(--color-white-flying) !important;
    margin-bottom: 10px !important;
  }

  section#services div li img {
    height: 100vh !important;
    width: 100vw !important;
    top: 0 !important;
    left: -3vw !important;
    object-fit: cover;
    object-position: center;

    will-change: opacity;
    opacity: 0;
    animation: servicesCycleOpa 20s infinite ease-in-out;
    animation-delay: calc(var(--n) * 4s);
  }

  section#services div li:nth-child(1) { --n: 0; }
  section#services div li:nth-child(2) { --n: 1; }
  section#services div li:nth-child(3) { --n: 2; }
  section#services div li:nth-child(4) { --n: 3; }
  section#services div li:nth-child(5) { --n: 4; }

  section#services div li {
    animation: servicesCycleColor 20s infinite ease-in-out;
    animation-delay: calc(var(--n) * 4s);
  }

  @keyframes servicesCycleOpa {
    0% { opacity: 0; }
    5%, 15%  { opacity: 1; }
    20%, 100% { opacity: 0; }
  }

  @keyframes servicesCycleColor {
    0% { color: var(--color-white-flying); }
    5%, 15%  { color: var(--color-yellow); }
    20%, 100% { color: var(--color-white-flying); }
  }

  section#partners li {
    flex: 0 1 45% !important;
  }

  section#products li {
    flex: 0 1 100% !important;
  }

  section#team li {
    width: 100% !important;
  }

  section#team summary {
    width: 25% !important;
  }

  section#team .team-member-detail {
    position: static !important;
    width: 100% !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  section#blog a:not(:first-of-type) article img {
    display: none !important;
  }

  section#projects article > section.slideshow nav {
    display: none !important;
  }

  section#shop > ul > li:nth-child(2n+1) > div:first-child {
    order: unset !important;
  }

  section#shop > ul > li:nth-child(2n+1) > div:last-child {
    order: unset !important;
  }

  .socialmedia-overlay .content img[src], .socialmedia-overlay .content h2 {
    width: 80% !important;
    padding-left: 10% !important;
    padding-right: 10% !important;
  }
}

html {
  font-family: var(--font-family-regular);
  font-size: var(--font-size-base);
  color: var(--color-white-flying);
  background: var(--color-white-pure);

  box-sizing: border-box;
  height: 100vh;
  padding: 0;
}

body {
  height: calc(100%);
  width: calc(100%);
  margin: 0;
  padding: 20px;
  box-sizing: border-box;

  background-color: var(--color-grey-dark);
}

body > header, body > main > section, section.splash-card, section.splash-screen, body > main > footer, .socialmedia-overlay {
  display: grid;
  grid-column-gap: 32px;
  grid-row-gap: 0;
  grid-template-columns:
      3vw
      [col1] 1fr
      [col2] 1fr
      [col3] 1fr
      [col4] 1fr
      [col5] 1fr
      [col6] 1fr
      [col7] 1fr
      [col8] 1fr
      [col9] 1fr
      [col10] 1fr
      [col11] 1fr
      [col12] 1fr
      [col13]
      3vw;
  margin: 0 auto;

  inset: 0;

  scroll-snap-align: start;
}

main {
  height: calc(100vh - 2 * var(--border-fullscreen-width));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border: var(--border-fullscreen);

  background-image: url('/assets/icons/bg_tile.webp');
  background-repeat: repeat;

  overflow-y: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scrollbar-color: var(--color-grey-mid) var(--color-grey-dark);
  scrollbar-width: thin;
}

main[data-page="note"] {
  scroll-snap-type: none;
}

main > section {
  padding-top: var(--padding-top-content);
  place-items: anchor-center;
  display: grid;
}

main > section > article {
  grid-template-columns: subgrid;
  display: grid;
  grid-column: var(--grid-content-full);
}

img, video {
  width: 100%;
}

li {
  list-style: none;
}

p {
  margin-bottom: 30px;
}

a {
  color: currentColor;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-family-title);
  font-size: var(--font-size-huge);
  text-transform: uppercase;
  line-height: 1;
}

h1 {
  margin-bottom: 60px;
  justify-self: left;
}

section > h1 {
  display: block !important;
}

section h2 {
  font-size: var(--font-size-title);
  color: var(--color-white-flying);
  font-weight: normal;
  margin-bottom: 10px;
  text-align: left;
}

h4 {
  font-size: var(--font-size-base);
}

.full-content {
  grid-column: var(--grid-content-full);
  grid-template-columns: subgrid;
  display: grid;
}

.right-col, .right-col-larger, .right-col-thiner,
.left-col, .left-col-larger, .left-col-thiner {
  width: 100%;
}

.right-col {
  grid-column: var(--grid-content-right);
}

.right-col-thiner {
  grid-column: var(--grid-content-right-thiner);
}

.right-col-larger {
  grid-column: var(--grid-content-right-larger);
}

.left-col {
  grid-column: var(--grid-content-left);
}

.left-col-thiner {
  grid-column: var(--grid-content-left-thiner);
}

.left-col-larger {
  grid-column: var(--grid-content-left-larger);
}

.highlight {
  border-left: var(--border-yellow);
  padding-left: 15px;
}

.eye-catcher {
  text-transform: uppercase;
  font-family: var(--font-family-regular);
  font-size: var(--font-size-base);
  letter-spacing: 0.15rem;
  font-weight: var(--font-weight-black);
}

.opacity-hover img {
  opacity: 0.6;
  transition: opacity var(--transition-quick) ease;
}

.opacity-hover:hover img {
  opacity: 1;
}

.arrow-link {
  display: inline-flex;
  align-items: center;

  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-family-title);
}

.arrow-link::before {
  content: '';
  mask-image: url('/assets/icons/arrow-right.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center left;
  mask-mode: luminance;
  background-color: var(--color-white-flying);

  height: 20px;
  width: 20px;
  padding-right: 10px;
}

.arrow-link:hover::before, section#blog a.opacity-hover:hover .arrow-link::before {
  background-color: var(--color-yellow);
  transition: background-color var(--transition-quick) ease-in;
}

/*** KirbyText ***/
.kirbyText ul, .kirbyText ol {
  padding-left: 0.9rem;
}

.kirbyText ul > li {
  list-style-type: square; 
}

.kirbyText ol > li {
  list-style-type: decimal; 
}

.kirbyText figure img, .kirbyText figure video, .kirbyText figure iframe{
  margin-top: 32px;
  margin-bottom: 32px;
}

.kirbyText figure:has(iframe) {
  padding-top: calc(56% + 64px);
  position: relative;
  overflow: hidden;
}

.kirbyText figure iframe {
  width: 100%;
    height: 100%;
    border: 0;
    position: absolute;
    inset: 0;
}

.kirbyText h1, .kirbyText h2, .kirbyText h3, .kirbyText h4 {
  font-size: var(--font-size-big);
  margin-top: 32px;
  margin-bottom: 32px;
}



.slideshow {
  /* Set dimensions and hide overflow */
  width: 100%;
}

.slideshow ol {
  display: flex;
  aspect-ratio: 18/10;
  width: 100%;

  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-type: x mandatory;
}

.slideshow li {
  /* Each slide takes up 100% of the container width */
  width: 100%; /* Adjust for number of slides */
  flex-shrink: 0;

  scroll-snap-align: center;
}

.slideshow nav a {
  mask-image: url('/assets/icons/next.svg');
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: start center;
  mask-mode: luminance;

  background-color: var(--color-white-flying);
  width: 100%;
  aspect-ratio: 1/1;

  height: 40px;
  width: 40px;

  cursor: pointer;
}

.slideshow nav a:hover {
  background-color: var(--color-yellow);
  transition: background-color var(--transition-quick) ease-in;
}

.slideshow nav a:first-of-type {
  transform: rotate(180deg);

  margin-bottom: 10px;
}

.hidden {
  opacity: 0;
  transition: opacity var(--transition-quick) ease;
}


.socialmedia-overlay {
  background-color: var(--color-menu-background);
  font-family: var(--font-family-title);
  color: var(--color-white-flying);
  border: 0;

  inset: 0;
  width: calc(100% - var(--border-fullscreen-width) * 2);
  border: var(--border-fullscreen);
  height: 100%;
  z-index: 90;

  display: none;
  position: fixed;
  align-items: center;
  justify-items: center;

  grid-template-rows: 79px 1fr;
}

.socialmedia-overlay:popover-open {
  display: grid;
}

.socialmedia-overlay button {
  grid-column: var(--grid-content-full);
  place-self: flex-end !important;
  width: 40px !important;
  height: 40px !important;

  background-image: url('/assets/icons/menu-open.svg') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.socialmedia-overlay button:hover {
  background-image: url('/assets/icons/menu-open-hover.svg') !important;
}

.socialmedia-overlay .content {
  display: grid;
  grid-column: var(--grid-content-full);
  grid-template-columns: subgrid;

  text-align: left;
  justify-content: center;
  place-content: center;

  width: 100%;
  height: calc(100% - 79px);
  padding-bottom: 79px;
  gap: 5%;
}

.socialmedia-overlay .content h2 {
  text-align: left !important;
  place-content: center;
  font-size: var(--font-size-huge);
  font-weight: var(--font-weight-normal);
  margin-bottom: 0;

  grid-column: var(--grid-content-left-larger);
}

.socialmedia-overlay .content img {
  display: block !important;
  width:100% !important;
  margin: 0 !important;
  padding: 0 !important;

  grid-column: var(--grid-content-right-thiner);
}


/************** HEADER **************/
body > header {
  position: fixed;

  padding-top: 40px;

  z-index: 90;

  height: calc(var(--padding-top-content) - 40px);

  margin: var(--border-fullscreen-width);
}

body > header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;

  background-image: url('/assets/icons/bg_tile.webp');
  mask-image: linear-gradient(to top, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
  z-index: -1;
}

body > header .logo {
  grid-column: col2 / col10;
  z-index: 0;
  background: none;
}

nav.menu {
  grid-column: col11 / col12;
  justify-self: end;
  align-items: center;
  font-size: var(--font-size-menu);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  height: fit-content;
  margin-left: auto;
}

nav.menu .menu-hamburger {
  display: block;
  background-image: url('/assets/icons/menu-closed.svg');
  background-repeat: no-repeat;
  background-position: center;
  height: 40px;
  width: 40px;

  cursor: pointer;
  position: sticky;
  z-index: 92;
}

#menu-toggle {
  display: none;
}

nav.menu .menu-hamburger:hover {
  background-image: url('/assets/icons/menu-closed-hover.svg');
}

#menu-toggle:checked + .menu-hamburger {
  background-image: url('/assets/icons/menu-open.svg');
}

#menu-toggle:checked + .menu-hamburger:hover {
  background-image: url('/assets/icons/menu-open-hover.svg');
}

#main-menu {
  display: none;
  opacity: 0;
  z-index: 91;

  grid-template-columns: 1fr 1fr;
  justify-items: center;
  position: fixed;
  inset: 0;

  font-family: var(--font-family-title);
}

#menu-toggle:checked ~ #main-menu {
  display: grid;
  opacity: 1;
  padding-top: 40vh;

  animation: menuExpand 0.5s forwards;
}

@keyframes menuExpand {
  0% {
    opacity: 0;
    display: none;
  }
  1% {
    display: grid;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#menu-toggle:not(:checked) ~ #main-menu {
  animation: menuCollapse 0.5s forwards;
}

@keyframes menuCollapse {
  0% { opacity: 1; }
  99% { opacity: 0; }
  100% { opacity: 0; display: none; }
}


#main-menu {
  background-color: var(--color-menu-background);
}

#main-menu a {
  padding: 0 0.5rem;
}

.menu a:hover {
  background-color: var(--color-yellow);
  color: var(--color-white-flying);

  transition: background-color var(--transition-quick) ease-in;
}

#main-menu a[aria-current] {
  background-color: var(--color-grey-mid);
}

/************** HEADER **************/

/************** FOOTER **************/
body > main > footer {
  scroll-snap-align: end;
  padding-top: 10vh;
  padding-bottom: 10vh;

  font-size: var(--font-size-small);
}

body > main > footer .logo {
  grid-column: col2 / col6;
  z-index: 0;
  background: none;
  text-align: start;
}

body > main > footer > nav {
  grid-column: col6 / col12;
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-content;
}

body > main > footer > nav > ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 1rem;
}

body > main > footer > nav > ul > li {
  display: inline-flex;
  place-items: center;
  justify-content: center;
}

body > main > footer > nav > ul > li img {
  display: none;
}

body > main > footer a, body > main > footer button {
  padding: 5px;
  border-radius: 5px;
  vertical-align: middle;
  align-content: center;
  text-align: end;
  color: var(--color-white-flying);
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--font-size-small);
}

body > main > footer a:hover, body > main > footer button:hover {
  color: var(--color-yellow);
  background-color: var(--color-menu-background);
  transition:
    color var(--transition-quick) ease-in,
    background-color var(--transition-quick) ease-in;
}

body > main > footer a.logo:hover {
  background-color: unset;
}

/************** FOOTER **************/


/************ SPLASH SCREEN ************/
section.splash-screen, section.splash-screen-noborder {
  background-color: var(--color-grey-dark);
  position: fixed;
  inset: 0;
  border: var(--border-fullscreen);

  z-index: 1;
}

section.splash-screen-noborder {
  inset: calc(-1 * var(--border-fullscreen-width));
}

section.splash-screen > .logo {
  grid-row: 1;
  position: absolute;
  top: 20px;
}

/************ SPLASH SCREEN ************/


/************ SPLASH CARD ************/
section.splash-card {
  grid-template-rows: 1fr 80px;

  overflow-x: clip;
  contain: layout style paint;
  padding-top: 0;

  min-height: calc(100vh - 2 * var(--border-fullscreen-width));
}

section.splash-card > div {
  padding-top: var(--padding-top-content);
  align-content: center;
  position: relative;

  z-index: 50;
}

section.splash-card:last-of-type {
  border-bottom: none !important;
}

section.splash-card, section.splash-card .background {
  width: 100%;
  min-height: calc(100vh - 2 * var(--border-fullscreen-width));
}

section.splash-card nav, section.splash-card nav a {
  display: block;
  width: 30px;
  height: 30px;
}


section.splash-card .background {
  position: absolute;
  inset: 0;

  object-fit: cover;
  object-position: center;

  z-index: 0;
}

section.splash-card nav {
  grid-column: var(--grid-content-full);
  justify-self: center;
  align-self: center;

  z-index: 50;
}

section.splash-card nav a {
  align-self: end;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('/assets/icons/arrow.svg');
}

/************ SPLASH CARD ************/

/************ HOME ************/

section.home-slide1 {
  display: flex;
  place-content: center;
  flex-direction: column;

  animation: bgFade 5s forwards;

  z-index: 101;
}

@keyframes bgFade {
  0%, 15% { opacity: 1; }
  100% { opacity: 0; display: none; visibility: hidden; }
}

section.home-slide1 * {
  display: flex;
  padding-left: center;
  text-align: center;

  text-transform: uppercase;
  letter-spacing: 0.38rem;
  font-weight:var(--font-weight-bold);

  justify-content: center;
}

section#intro > * {
  z-index: 1;
}

section#intro div {
  grid-column: var(--grid-content-left);
  background: var(--color-overlay-background);

  padding: 16px;
  height: fit-content;
  align-self: end;
}

section#intro div p {
  margin: 0;
}

section#services div {
  grid-column: var(--grid-content-full);
  width: 100%;
}

section#services div ul {
  height: 40vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  place-content: space-evenly;
}

section#services div li {
  width: 100%;
  display: flex;
  color: var(--color-white-flying);
  transition: color var(--transition-quick) ease;  /* Quick 200ms */
}

section#services div li > * {
  display: inline-block;
}

section#services div li img {
  position: absolute;
  height: 70%;
  width: auto;
  top: max(30%, var(--padding-top-content));
  right: 0;

  z-index: -1;

  pointer-events: none; /* Don't trigger hover */
}

section#services div.highlight {
  color: var(--color-yellow);
  margin-left: 20px;
  opacity: 0;

  align-content: center;
  transition: opacity var(--transition-quick) ease;
}

section#services div.highlight p {
  margin-bottom: 0;
}

section#services div li:hover div {
  opacity: 1;
  transition: opacity var(--transition-quick) ease;
}

section#services div li:hover {
  color: var(--color-yellow);
  transition: color var(--transition-quick) ease;
}

section#services h3 {
  color: unset;

  flex-shrink: 0;
}

section#partners div {
  grid-column: var(--grid-content-full);
  font-family: var(--font-family-title);
  text-align: center;
}

section#partners h2 {
  text-align: left;
}

section#partners ul {
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 5vh 6%;
  justify-content: space-between;
}

section#partners li {
  flex: 0 1 20%;  /* 4-col basis */
}

section#partners li img {
  width: 100%;
}

section#partners .arrow-link, section#products .arrow-link {
  margin-top: 30px;
}

section#products div {
  grid-column: var(--grid-content-full);
  font-family: var(--font-family-title);
  text-align: center;
}

section#products ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

section#products li {
  flex: 0 1 30%;  /* 4-col basis */
  text-align: left;
}

section#products li img {
  width: 100%;
}

section#products h3 {
  margin-top: 10px;
}

section#products a {
  text-transform: uppercase;
  font-size: var(--font-size-base);
}

a:hover, label:hover {
  color: var(--color-yellow);
  transition: color var(--transition-quick) ease-in;
}

/*********** ABOUT PAGE ***********/
section#gallery ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;

  grid-column: var(--grid-content-full);
}

section#gallery ul li {
  width: 100%;
}

section#team ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10%;
  
  margin-left: -1vw;
}

section#team li {
  width: 45%;
  text-align: center;
}

section#team summary h3 {
  font-family: var(--font-family-regular);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-black);
}

section#team .team-member-detail .highlight {
  font-weight: var(--font-weight-black);
  text-transform: uppercase;
}

section#team .team-member-detail h3 {
  font-size: var(--font-size-big);
  color: var(--color-yellow);

  padding-top: 0.2lh;
  line-height: 0.8;
}

section#team summary::marker {
  display: none;
}

section#team summary {
  list-style: none;
  cursor: pointer;
}

section#team details[open] summary img {
  opacity: 1;
}

section#team .full-content {
  position: relative;
}

section#team .team-member-detail {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  text-align: left;
  place-content: center;
}

section#testimonials li {
  margin-top: 50px;
  font-size: var(--font-size-small);
}

section#testimonials h3 {
  line-height: 0.9;
  margin-bottom: 10px;
}

section#contacts {
  font-size: var(--font-size-small);
}

section#contacts ul {
  display: flex;
  flex-direction: row;

  justify-content: space-evenly;
  place-self: center;
  width: 100%;

  gap: 4vw;
}

section#contacts ul li {
  flex: 1;
  min-width: 0;
  text-align: center;
  background-image: url('/assets/icons/social-media-bg.png');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}

section#contacts ul li a, section#contacts ul li button {
  background: none;

  font-size: var(--font-size-small);
  color: var(--color-white-flying);
  border: none;
  cursor: pointer;
  width: 100%;
}

section#contacts ul li span {
  display: block;
  word-wrap: break-word;
}

section#contacts ul li img {
  width: 70%;
  margin-bottom: 20%;
  padding-top: 15%;
}

section#contacts ul li a:hover img {
  opacity: 1;
}

/*********** BLOG PAGE ***********/
section#blog article {
  font-family: var(--font-family-title);

  display: grid;
  grid-template-columns: subgrid;
  grid-column: var(--grid-content-full);

  margin-bottom: 40px;
}

section#blog article h3 {
  margin-top: 5px;
  margin-bottom: 5px;
}

section#blog article img {
  grid-row: 1;
}

section#blog article p {
  font-family: var(--font-family-regular);
  margin-bottom: 15px;
}

section#blog, section#blog_article {
  scroll-snap-type: unset;
}

/*********** BLOG ARTICLE PAGE ***********/
section#blog_article > * {
  grid-column: var(--grid-content-full);
}

section#blog_article > article > * {
  grid-column: var(--grid-content-full);
  margin-bottom: 10px !important;
}

section#blog_article > article time {
  font-size: var(--font-size-title);
  font-family: var(--font-family-title);
}

/************* PORTFOLIO PAGE ***********/
section#projects article {
  margin-bottom: 70px;
}

section#projects article > header {
  grid-column: var(--grid-content-left-larger);
}

section#projects article > header > * {
  margin-top: 5px;
}

section#projects article > section, section#projects article > section.slideshow {
  display: grid;
  grid-column: var(--grid-content-full);
  grid-template-columns: subgrid;
}

section#projects article > section.slideshow nav {
  grid-column: var(--grid-content-right-minima);

  display:flex;
  flex-direction: column;
  justify-content: center;
  place-items: end;
}

section#projects article > section.slideshow ol {
  grid-column: var(--grid-content-left-maxima);
}

/******************* SHOP PAGE *******************/

.arrow-link.buy-button::before {
  mask-image: url('/assets/icons/purchase.svg') !important;
}

.arrow-link.play-button::before {
  mask-image: url('/assets/icons/play.svg') !important;
}

input[type="checkbox"]:checked + .arrow-link.play-button::before{
  mask-image: url('/assets/icons/pause.svg') !important;
}

.arrow-link.download-button::before {
  mask-image: url('/assets/icons/download.svg') !important;
}

section#shop > *, section#shop > ul > li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: var(--grid-content-full);
  margin-bottom: 100px;
  scroll-margin-top: var(--padding-top-content);
}

section#shop > ul > li:nth-child(2n) > div:first-child {
  grid-column: var(--grid-content-left-larger);
}

section#shop > ul > li:nth-child(2n) > div:last-child {
  grid-column: var(--grid-content-right-thiner);
}

section#shop > ul > li:nth-child(2n+1) > div:first-child {
  grid-column: var(--grid-content-right-larger);
  order: 2;
}

section#shop > ul > li:nth-child(2n+1) > div:last-child {
  grid-column: var(--grid-content-left-thiner);
  order: 1;
}

section#shop .product_description h3 {
  margin-bottom: 16px;
}

section#shop .product_categories li::marker {
  content: "– ";
}

section#shop .product_categories li {
  margin-left: 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  content: "– ";
}

section#shop h4 {
  margin-bottom: 10px;
  margin-top: 20px;
}

section#shop .product_actions > * {
  margin-bottom: 10px;
  margin-top: 10px;
}

section#shop .product_actions > img {
  margin-bottom: 0;
  margin-top: 0;
}