/* GLOBAL ------------------------------------------------------------------------------------------------------------- */
:root {
  box-sizing: border-box; /* Prevent overflow */
  scroll-behavior: smooth;

  /* BROWSER UI */
  /* Scrollbar */
  scrollbar-color: var(--midGrey) var(--offWhite);

  /* Selection */
  ::selection {
    background-color: rgb(0 0 0 / 0);
    color: rgb(0 0 0 / 0);
  }

  /* LAYOUT */
  --gutter: clamp(20px, 2vw, 80px);
  --cornerRadius: clamp(2px, 0.2vw, 6px);
  --lineWidth: clamp(1.5px, 0.1vw, 3px);

  /* Gaps */
  --xxsGap: 0.25rem;
  --xsGap: 0.5rem;
  --sGap: 0.75rem;
  --mGap: 1.25rem;
  --lGap: 1.75rem;
  --xlGap: 2.5rem;
  --xxlGap: 3.75rem;
  --xxxlGap: 7.5rem;

  --sectionsGap: 40vh;

  /* FONTS */
  /* Sizes */
  --h1FontSize: 5.25rem;
  --h1LineHeight: 6.125rem;
  --h2FontSize: 2.75rem;
  --h2LineHeight: 3.125rem;
  --h3FontSize: 1.75rem;
  --h3LineHeight: 2.0625rem;

  --leadFontSize: 2.25rem;
  --leadLineHeight: 2.75rem;

  --textFontSize: 1.5rem;
  --textLineHeight: 1.875rem;

  --detailsFontSize: 1rem;
  --detailsLineHeight: 1.125rem;

  /* Weights */
  --semiBold: 600;
  --regular: 400;

  /* COLORS */
  --offBlack: #2c2c2c;
  --midGrey: #7c7c7c;
  --offWhite: #eeeeee;

  --darkBackground: rgb(0, 0, 0, 0.75);

  /* ANIMATIONS */
  --fadecolorDuration: 0.6s;
  --fadeimageDuration: 0.4s;
  --zoomDuration: 0.7s;

  --fadecolorEase: cubic-bezier(0.5, 1, 0.9, 1);
  --fadeimageEase: cubic-bezier(0.5, 0, 0.5, 1);
  --zoomEase: cubic-bezier(0.2, 0, 0.3, 1);
}

@font-face {
  font-family: "Albert-Sans";
  src:
    url(/assets/fonts/Albert-Sans/ttf/AlbertSans-VariableFont_wght.ttf)
      format("truetype"),
    url(/assets/fonts/Albert-Sans/woff2/AlbertSans-VariableFont_wght.woff2)
      format("woff2"),
    url(/assets/fonts/Albert-Sans/woff/AlbertSans-VariableFont_wght.woff)
      format("woff");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Albert-Sans";
  src:
    url(/assets/fonts/Albert-Sans/ttf/AlbertSans-Italic-VariableFont_wght.ttf)
      format("truetype"),
    url(/assets/fonts/Albert-Sans/woff2/AlbertSans-Italic-VariableFont_wght.woff2)
      format("woff2"),
    url(/assets/fonts/Albert-Sans/woff/AlbertSans-Italic-VariableFont_wght.woff)
      format("woff");
  font-weight: 100 900;
  font-style: italic;
}

* {
  margin: 0px;
  padding: 0px;

  font-family: "Albert-Sans", sans-serif;
  font-style: normal;
  font-weight: var(--regular);
  font-size: var(--textFontSize);
  line-height: var(--textLineHeight);
  color: var(--offBlack);
  text-decoration: none;
}

html {
  height: 100%; /* Force footer to end of page */
}

/* Grid */
body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto;
  grid-template-areas:
    "main main main main main main main main main header header header"
    "footer footer footer footer footer footer footer footer footer header header header";
  column-gap: var(--gutter);
  margin: 0 var(--gutter);
  background-color: var(--offWhite);
}

header {
  grid-area: header;

  position: sticky;
  top: var(--gutter);
  z-index: 100;

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 3fr 1fr;
  grid-template-areas:
    ". nav nav"
    ". lang .";
  height: calc(100vh - 2 * var(--gutter)); /* Viewport Height */
  margin: var(--gutter) 0;
}

main {
  grid-area: main;

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;

  & > * {
    grid-column: span 9; /* Span all Sections over full width of main */
    margin-top: var(--gutter);
  }

  & > :not(:first-child),
  & > .blocks > *:not(:last-child) {
    margin-bottom: var(--sectionsGap); /* Excluding "Intro" Section */
  }
}

footer {
  grid-area: footer;

  display: flex;
  height: calc(100vh - 2 * var(--gutter)); /* Viewport Height */
  flex-direction: column;
  justify-content: space-between;

  margin-bottom: var(--gutter);

  bottom: 0; /* Force footer to end of page */
}

/* FONTS -------------------------------------------------------------------------------------------------------------- */
h1 {
  font-family: "Albert-Sans", sans-serif;
  font-style: normal;
  font-weight: var(--semiBold);
  font-size: var(--h1FontSize);
  line-height: var(--h1LineHeight);
  color: var(--offBlack);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

h2 {
  font-family: "Albert-Sans", sans-serif;
  font-style: normal;
  font-weight: var(--semiBold);
  font-size: var(--h2FontSize);
  line-height: var(--h2LineHeight);
  color: var(--offBlack);
}

h3 {
  font-family: "Albert-Sans", sans-serif;
  font-style: normal;
  font-weight: var(--semiBold);
  font-size: var(--h3FontSize);
  line-height: var(--h3LineHeight);
  color: var(--offBlack);
}

.lead {
  font-family: "Albert-Sans", sans-serif;
  font-style: normal;
  font-weight: var(--semiBold);
  font-size: var(--leadFontSize);
  line-height: var(--leadLineHeight);
  color: var(--offBlack);
  text-wrap: pretty;
}

p,
a {
  font-family: "Albert-Sans", sans-serif;
  font-style: normal;
  font-weight: var(--regular);
  font-size: var(--textFontSize);
  line-height: var(--textLineHeight);
  color: var(--offBlack);
  text-wrap: pretty;
}

a {
  cursor: pointer;
}

.details {
  font-family: "Albert-Sans", sans-serif;
  font-style: normal;
  font-weight: var(--regular);
  font-size: var(--detailsFontSize);
  line-height: var(--detailsLineHeight);
  color: var(--midGrey);

  user-select: none;
  --webkit-user-select: none; /* Safari */

  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.tags {
  font-family: "Albert-Sans", sans-serif;
  font-style: normal;
  font-weight: var(--regular);
  font-size: var(--detailsFontSize);
  line-height: var(--detailsLineHeight);
  color: var(--midGrey);
  text-transform: uppercase;

  user-select: none;
  --webkit-user-select: none; /* Safari */

  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.midGrey,
.midGrey * {
  color: var(--midGrey) !important;
}

/* KIRBY TEXT --------------------------------------------------------------------------------------------------------- */
/* Bold */
strong {
  font-family: "Albert-Sans", sans-serif;
  font-style: normal;
  font-weight: var(--semiBold);
}

/* Italic */
em {
  font-family: "Albert-Sans", sans-serif;
  font-style: italic;
  font-weight: var(--regular);
}

/* Underline */
u {
  text-decoration: underline;
}

/* Strike */
s {
  text-decoration: line-through;
}

/* Lists */
ul,
ol {
  padding-left: 1.5em;
}

/* Bullet List */
ul li {
  list-style-type: disc;
}

/* Ordered List */
ol li {
  list-style-type: decimal;
}

/* IMAGES & VIDEOS ---------------------------------------------------------------------------------------------------- */
picture,
picture img {
  display: flex;
  width: 100%;
  height: auto;
  object-fit: cover;
}

img,
iframe {
  border-radius: var(--cornerRadius);
}

/* BUTTONS ------------------------------------------------------------------------------------------------------------ */
.primaryButton {
  font-family: "Albert-Sans", sans-serif;
  font-style: normal;
  font-weight: var(--semiBold);
  font-size: var(--textFontSize);
  line-height: var(--textLineHeight);
  color: var(--offBlack);
  background-color: unset;
  border: none;
  cursor: pointer;
}

.filterSeparator,
.filterSeparator span {
  width: var(--lineWidth);
  height: 100%;
  background-color: var(--offBlack);
  border-radius: var(--cornerRadius);
  margin: 0 var(--xsGap);
}

/* LIGHTBOX ----------------------------------------------------------------------------------------------------------- */
/* Maximize / Minimize Cursors */
.lightboxTrigger,
.lightboxOverlay {
  cursor: none; /* Hide default cursor */
}

.maximizeCursor,
.minimizeCursor {
  display: none;
  position: fixed;
  pointer-events: none;
  background: #ffffff;
  mix-blend-mode: difference;
  z-index: 9999;
}

.maximizeCursor {
  width: 1.5rem;
  height: 1.5rem;
  mask: url("../img/cursors/maximize.svg") top left / contain no-repeat;
  -webkit-mask: url("../img/cursors/maximize.svg") top left / contain no-repeat;
}

.minimizeCursor {
  width: 2.25rem;
  height: 2.25rem;
  mask: url("../img/cursors/minimize.svg") top left / contain no-repeat;
  -webkit-mask: url("../img/cursors/minimize.svg") top left / contain no-repeat;
}

/* Overlay */
.lightboxOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: var(--darkBackground);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.lightboxOverlay.is-active {
  opacity: 1;
  visibility: visible;
}

.lightboxOverlay picture img {
  max-width: calc(100vw - 2 * var(--gutter));
  max-height: calc(100vh - 2 * var(--gutter));
  object-fit: contain;
}

/* HEADER ------------------------------------------------------------------------------------------------------------- */
header ul,
header ul li {
  padding-left: 0;
  list-style-type: none;

  /* Animation */
  & .tags {
    transition: color var(--fadecolorDuration) var(--fadecolorEase);
  }

  & .tags:hover {
    color: var(--offBlack);
  }
}

/* Anchor Navigation */
#anchorNavigation {
  grid-area: nav;

  display: flex;
  flex-direction: column;

  & li {
    margin-bottom: var(--xxsGap);
  }
}

.anchor {
  scroll-margin-top: var(--gutter);
}

/* Language Switch */
#languageSwitch {
  grid-area: lang;

  display: flex;
  align-self: end;

  & > ul {
    display: flex;
    height: 100%;
    flex-direction: row;
    align-items: center;
  }
}

.activeLanguage a {
  color: var(--offBlack);
}

/* FOOTER ------------------------------------------------------------------------------------------------------------- */
footer > * {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;

  /* Animation */
  & .tags {
    transition: color var(--fadecolorDuration) var(--fadecolorEase);
  }

  & .tags:hover {
    color: var(--offBlack);
  }
}

/* Date & Time */
#currentDate {
  margin-bottom: var(--xsGap);
}

/* Switches (only for mobile) */
#footerSwitches {
  display: none;
}

footer ul,
footer ul li {
  padding-left: 0;
  list-style-type: none;
}

/* Links */
#legalStuff * {
  margin-right: var(--sGap);
}

#socials * {
  margin-left: var(--sGap);
}

/* INTRO -------------------------------------------------------------------------------------------------------------- */
.intro {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr;
  min-height: calc(100vh - 2 * var(--gutter)); /* Viewport Height */
  margin: var(--gutter) 0;
  align-items: end;
}

/* Logo */
#logoIntro {
  grid-column: span 2;
  height: fit-content;

  margin-bottom: var(--xxxlGap);
}

/* Content */
.introContent {
  grid-column: span 9;

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;
  row-gap: var(--xsGap);

  height: fit-content;

  & > * {
    grid-column: span 9;
  }
}

/* Hero Video */
#heroVideo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#heroVideo video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* HOMEPAGE ----------------------------------------------------------------------------------------------------------- */
/* WELCOME */
#welcome {
  grid-column: span 9;

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;
  row-gap: var(--sGap);

  & > * {
    grid-column: span 9;
  }
}

/* ABOUT */
#about {
  grid-column: span 9;

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(2, auto);

  & > * {
    grid-column: span 9;
    display: grid;
    grid-template-columns: subgrid;
    row-gap: var(--sGap);
  }
}

#aboutText > * {
  grid-column: 1 / 7;
}

#aboutImage > * {
  grid-column: 7 / 10;
}

/* CLIENTS */
#clients {
  grid-column: span 9;

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(1, 1fr);
  row-gap: var(--sGap);

  & > * {
    grid-column: span 9;

    display: grid;
    grid-template-columns: subgrid;
  }
}

/* Client Names */
#clientNames {
  grid-column: span 6;

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(6, 1fr);
  grid-auto-flow: column;

  user-select: none;
  --webkit-user-select: none; /* Safari */

  & > * {
    grid-column: span 3;
  }
}

/* Client Logos */
#clientLogos {
  grid-column: span 3;
  grid-row: span 1;

  display: flex;
  position: relative;
}

#clientLogos > div {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;

  /* Apply Scale */
  & > svg {
    display: flex;
    width: calc(100% * var(--scale, 1));
    height: calc(100% * var(--scale, 1));
  }
}

/* Hover Animation */
#clientLogos > div.is-active {
  display: flex;
}

/* Recolor Logo */
#clientLogos > div > svg * {
  fill: var(--midGrey);
}

/* PROJECT ------------------------------------------------------------------------------------------------------------ */
#projectInformations {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;

  & > * {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
  }
}

.creditsNameRole {
  display: flex;
  flex-direction: row;

  & > * {
    width: 100%;
  }

  & > *:first-child {
    margin-right: var(--gutter);
  }
}

/* Project Navigation */
#projectNavigation {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;
  row-gap: var(--gutter);
}

.projectNavigationButtons {
  grid-column: span 9;

  display: grid;
  grid-template-columns: subgrid;

  & > a {
    grid-column: span 6;

    display: flex;
    flex-direction: column;
    gap: var(--mGap);
    height: fit-content;
    width: fit-content;

    & > h1 {
      text-box-trim: trim-both;
      text-box-edge: cap text;
    }
  }

  & > picture {
    grid-column: span 3;

    aspect-ratio: 3 / 2;
    pointer-events: none;

    opacity: 0;
    transition: opacity var(--fadeimageDuration) var(--fadeimageEase);
  }
}

#nextProject {
  align-items: flex-end;
}

/* Animation */
.projectNavigationButtons a:hover + picture {
  opacity: 1;
}

/* PROJECTS PREVIEW --------------------------------------------------------------------------------------------------- */
#projectsPreview {
  grid-column: span 9;

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;
  align-content: start;

  & > * {
    grid-column: span 9;
  }
}

/* Filters */
#projectsPreviewHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: var(--mGap) 0;

  & > .tags {
    align-content: center;
  }
}

#filters {
  display: flex;
  flex-direction: row;

  & > div {
    display: flex;
    flex-direction: row;
  }

  & > * > button {
    border: none;
    background: none;
    cursor: pointer;

    transition: color var(--fadecolorDuration) var(--fadecolorEase);
  }

  & #gridListFilter {
    margin: var(--xxsGap) 0;

    & > button {
      display: flex;
      width: auto;
      height: 100%;
      aspect-ratio: 1 / 1;
      margin-right: var(--sGap);

      & > svg {
        width: auto;
        height: 100%;
      }

      & > svg g {
        transition: fill var(--fadecolorDuration) var(--fadecolorEase);
      }
    }
  }

  & #categoriesFilter {
    margin: var(--xxsGap) 0;

    & > button {
      margin-left: var(--sGap);
    }
  }

  /* Animation */
  & > * > button:hover {
    color: var(--offBlack);

    & svg g {
      fill: var(--offBlack);
    }
  }

  /* Active Filters */
  & .active {
    color: var(--offBlack);

    & svg g {
      fill: var(--offBlack);
    }
  }
}

/* Bug Fix: Project Filtering */
#projectsPreviewGrid .projectPreviewItem.isHidden {
  display: none;
}

#projectsPreviewGrid.viewList .projectPreviewItem.isHidden {
  display: none;
}

/* Grid View (default) */
#projectsPreviewGrid {
  grid-column: span 9;

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;
  gap: var(--gutter);
}

.projectPreviewItem {
  grid-column: span 3;

  display: flex;
  flex-direction: column;
  gap: var(--xsGap);
}

.projectInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.projectTitle {
  order: 1;
}

.projectYear {
  order: 2;
}

.projectCategories {
  display: none;
}

.projectCover {
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: var(--cornerRadius);

  & > picture {
    object-fit: cover;
    width: 100%;
    height: 100%;

    transition: transform var(--zoomDuration) var(--zoomEase);
  }

  & > picture:hover {
    transform: scale(1.1);
  }
}

/* List View */
#projectsPreviewGrid.viewList {
  row-gap: 0;
}

#projectsPreviewGrid.viewList .projectPreviewItem {
  grid-column: span 9;

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;
  gap: var(--gutter);

  /* No border on last item */
  &:last-child .projectInfo {
    border-bottom: none;
  }
}

#projectsPreviewGrid.viewList .projectCover {
  display: none;
}

#projectsPreviewGrid.viewList .projectInfo {
  grid-column: span 9;

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 1fr;
  align-items: center;
  padding: var(--lGap) 0;

  border-bottom: var(--lineWidth) solid var(--midGrey);
  transition: border-bottom-color var(--fadecolorDuration) var(--fadecolorEase);

  & > * {
    color: var(--midGrey);
    transition: color var(--fadecolorDuration) var(--fadecolorEase);
  }
}

#projectsPreviewGrid.viewList .projectInfo:hover {
  border-bottom: var(--lineWidth) solid var(--offBlack);

  & > * {
    color: var(--offBlack);
  }
}

#projectsPreviewGrid.viewList .projectYear {
  grid-column: span 2;
  order: 1;
}

#projectsPreviewGrid.viewList .projectTitle {
  grid-column: span 3;
  order: 2;
}

#projectsPreviewGrid.viewList .projectCategories {
  grid-column: span 4;
  order: 3;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  text-align: right;
}

/* Archiv Button */
#projectsPreview .buttonContainer {
  display: grid;
  justify-items: end;
  margin-top: var(--xxlGap);
}

/* BLOCKS ------------------------------------------------------------------------------------------------------------- */
/* TEXT */
.block-type-text {
  & > * {
    margin-bottom: var(--xsGap);
  }
  & > h1:not(:first-child),
  & > h2:not(:first-child),
  & > h3:not(:first-child) {
    margin-top: var(--xlGap);
  }
}

/* IMAGES */
/* Single Image */
.block-type-singleImage picture {
  aspect-ratio: 3 / 2;
}

.block-type-singleImage picture[data-orientation="portrait"] {
  aspect-ratio: 2 / 3;
}

/* Image Gallery */
.block-type-imageGallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--gutter);
}

.block-type-imageGallery picture {
  grid-row: span 1;
}

.block-type-imageGallery picture[data-orientation="portrait"] {
  grid-row: span 2;
}

/* VIDEOS */
/* YouTube & Instagram */
.loadYTVideo,
.loadInstaVideo {
  all: unset;
}

.insertYTVideo,
.insertInstaVideo {
  position: relative;
  overflow: hidden;
}

.loadYTVideo,
.insertYTVideo,
.insertYTVideo iframe {
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.loadInstaVideo,
.insertInstaVideo,
.insertInstaVideo iframe {
  display: flex;
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
}

/* Video Galleries */
.block-type-youtubeGallery,
.block-type-instagramGallery {
  grid-column: span 3;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--gutter);

  & > * {
    grid-column: span 1;
    grid-row: span 1;

    display: grid;
  }
}

/* Play Cursor */
.insertYTVideo,
.insertInstaVideo {
  cursor: none; /* Hide default cursor */
}

.playCursor {
  display: none;
  position: fixed;
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
  background: #ffffff;
  mix-blend-mode: difference;
  z-index: 9999;

  -webkit-mask: url("../img/cursors/play.svg") top left / contain no-repeat;
  mask: url("../img/cursors/play.svg") top left / contain no-repeat;
}

/* Cookies Informations */
.videoInfo {
  display: flex;
  position: relative;
  height: fit-content;
  width: fit-content;

  margin-top: var(--xsGap);
}

.infoToggle {
  all: unset;
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
}

.infoText {
  position: absolute;
  bottom: calc(100% + 2 * (var(--xsGap)));
  left: var(--xsGap);
  width: clamp(200px, 20vw, 600px);
  background: var(--darkBackground);
  color: var(--offWhite);
  padding: var(--xsGap);
  border-radius: var(--cornerRadius);

  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--xxsGap));
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
}

.videoInfo:hover .infoText,
.infoToggle[aria-expanded="true"] + .infoText {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* MEDIA QUERIES ------------------------------------------------------------------------------------------------------ */
/* TABLET ------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1500px) {
  /* VIDEOS */
  /* Video Galleries */
  .block-type-youtubeGallery,
  .block-type-instagramGallery {
    grid-column: span 4;

    grid-template-columns: repeat(4, 1fr);

    & > * {
      grid-column: span 2;
    }
  }
}

@media screen and (max-width: 1100px) {
  /* GLOBAL ----------------------------------------------------------------------------------------------------------- */
  /* Grid */
  body {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "main main main main"
      "footer footer footer footer";
  }

  header {
    display: none;
  }

  main {
    & > * {
      grid-column: span 4; /* Span all Sections over full width */
    }
  }

  /* FOOTER ----------------------------------------------------------------------------------------------------------- */
  /* Switches (only for mobile) */
  #footerSwitches {
    display: flex;
  }

  /* INTRO ------------------------------------------------------------------------------------------------------------ */
  /* Logo */
  #logoIntro {
    grid-column: span 1;
  }

  /* Content */
  .introContent {
    grid-column: span 4;

    & > * {
      grid-column: span 4;
    }
  }

  /* HOMEPAGE --------------------------------------------------------------------------------------------------------- */
  /* WELCOME */
  #welcome {
    grid-column: span 4;

    & > * {
      grid-column: span 4;
    }
  }

  /* ABOUT */
  #about {
    grid-column: span 4;

    & > * {
      grid-column: span 4;
    }
  }

  #aboutText > * {
    grid-column: 1 / 4;
  }

  #aboutImage > * {
    grid-column: 4 / 5;
  }

  /* CLIENTS */
  #clients {
    grid-column: span 4;

    & > * {
      grid-column: span 4;
    }
  }

  /* Client Names */
  #clientNames {
    grid-column: span 2;

    grid-template-rows: repeat(6, 1fr);

    & > * {
      grid-column: span 1;
    }
  }

  /* Client Logos */
  #clientLogos {
    grid-column: 4 / 5;
  }

  /* PROJECT ---------------------------------------------------------------------------------------------------------- */
  #projectCredits {
    grid-column: span 2;
  }

  #projectLinks,
  #projectCategories {
    grid-column: span 1;
  }

  .creditsNameRole {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--gutter);

    & > * {
      width: 100%;
    }
  }

  /* Project Navigation */
  .projectNavigationButtons {
    grid-column: span 4;

    & > a {
      grid-column: span 3;
    }

    & > picture {
      grid-column: span 1;
    }
  }

  /* PROJECTS PREVIEW ------------------------------------------------------------------------------------------------- */
  #projectsPreview {
    grid-column: span 4;

    & > * {
      grid-column: span 4;
    }
  }

  /* Grid View (default) */
  #projectsPreviewGrid {
    grid-column: span 4;
  }

  .projectPreviewItem {
    grid-column: span 2;
  }

  /* List View */
  #projectsPreviewGrid.viewList .projectPreviewItem {
    grid-column: span 4;
  }

  #projectsPreviewGrid.viewList .projectInfo {
    grid-column: span 4;
  }

  #projectsPreviewGrid.viewList .projectYear {
    grid-column: span 1;
  }

  #projectsPreviewGrid.viewList .projectTitle {
    grid-column: span 1;
  }

  #projectsPreviewGrid.viewList .projectCategories {
    grid-column: span 2;
  }

  /* BLOCKS ----------------------------------------------------------------------------------------------------------- */
  /* IMAGES */
  /* Image Gallery */
  .block-type-imageGallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* MOBILE ------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
  /* GLOBAL ----------------------------------------------------------------------------------------------------------- */
  :root {
    /* Gaps */
    --sectionsGap: 20vh;

    /* FONTS */
    /* Sizes */
    --h1FontSize: 3rem;
    --h1LineHeight: 3.25rem;
    --h2FontSize: 2rem;
    --h2LineHeight: 2.25rem;
    --h3FontSize: 1.5rem;
    --h3LineHeight: 1.75rem;

    --leadFontSize: 1.5rem;
    --leadLineHeight: 1.875rem;

    --textFontSize: 1.125rem;
    --textLineHeight: 1.625rem;

    --detailsFontSize: 0.75rem;
    --detailsLineHeight: 1rem;
  }

  /* FOOTER ----------------------------------------------------------------------------------------------------------- */
  #footerLinks {
    align-items: flex-end;

    & > * {
      display: flex;
      flex-direction: column;
      margin-top: var(--lGap);

      & > * {
        margin: var(--sGap) 0 0 0;
      }
    }
  }

  /* Switches (only for mobile) */
  #footerSwitches {
    display: flex;
  }

  /* INTRO ------------------------------------------------------------------------------------------------------------ */
  /* Logo */
  #logoIntro {
    grid-column: span 2;
  }

  /* HOMEPAGE --------------------------------------------------------------------------------------------------------- */
  /* ABOUT */
  #aboutText {
    margin-bottom: var(--lGap);

    & > * {
      grid-column: span 4;
    }
  }

  #aboutImage > * {
    grid-column: span 4;
  }

  /* CLIENTS */
  #clients {
    grid-column: span 4;

    & > * {
      grid-column: span 4;
    }
  }

  /* Client Names */
  #clientNames {
    grid-column: span 2;

    & > * {
      grid-column: span 2;
    }
  }

  /* Client Logos */
  #clientLogos {
    display: none;
  }

  /* PROJECT ---------------------------------------------------------------------------------------------------------- */
  #projectInformations {
    grid-column: span 4;

    & > * {
      grid-column: span 4;

      margin-bottom: var(--mGap);
    }
  }

  /* Project Navigation */
  #projectNavigation {
    row-gap: var(--xlGap);
  }

  .projectNavigationButtons {
    grid-column: span 4;

    & > a {
      grid-column: span 4;
    }

    & > picture {
      display: none;
    }
  }

  /* PROJECTS PREVIEW ------------------------------------------------------------------------------------------------- */
  #projectsPreviewHeader > p:first-of-type {
    display: none;
  }

  #projectsPreview {
    grid-column: span 4;

    & > * {
      grid-column: span 4;
    }
  }

  /* Filters */
  #projectsPreviewHeader {
    display: flex;
    flex-direction: column;
    gap: var(--mGap);
    margin: var(--lGap) 0 var(--mGap) 0;
  }

  #filters {
    justify-content: space-between;

    & > .filterSeparator {
      display: none;
    }
  }

  /* Grid View (default) */
  #projectsPreviewGrid {
    grid-column: span 4;
    gap: var(--lGap);
  }

  .projectPreviewItem {
    grid-column: span 4;
    gap: var(--sGap);
  }

  /* List View */
  #projectsPreviewGrid.viewList .projectYear {
    grid-column: span 2;
  }

  #projectsPreviewGrid.viewList .projectTitle {
    grid-column: span 2;
  }

  #projectsPreviewGrid.viewList .projectCategories {
    display: none;
  }

  /* Archiv Button */
  #projectsPreview .buttonContainer {
    margin-top: var(--xlGap);
  }

  /* BLOCKS ----------------------------------------------------------------------------------------------------------- */
  /* IMAGES */
  /* Image Gallery */
  .block-type-imageGallery {
    grid-template-columns: repeat(2, 1fr);
  }

  /* VIDEOS */
  /* Video Galleries */
  .block-type-youtubeGallery,
  .block-type-instagramGallery {
    grid-column: span 4;

    grid-template-columns: repeat(2, 1fr);

    & > * {
      grid-column: span 2;
    }
  }
}