body {
  padding: 0px !important;
}


body {
  overflow: hidden;
  height: 100svh;
}

header {
  position: fixed;
  width: 100%;
  text-align: center;
  top: 3.5vh;
  z-index: 1;

  & a {
    padding: 1lh;
  }
}


/* --- Images Wrapper --- */


.project {
  width: 100vw;
  height: 100svh;

  display: flex;
  gap: 0;
  flex: 1;
  scroll-snap-type: x mandatory;
  overflow: hidden;
  /* overscroll-behavior-x: contain; */

}


/* --- Debug Figures --- */

/* figure {
  outline: 1px solid green;
}

picture {
  outline: 1px solid fuchsia;
}

img {
  outline: 1px solid red;
} */

/* --- Figures --- */


figure {
  box-sizing: border-box;
  position: relative;

  margin: 0 auto;

  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  gap: 2lh;
  padding: 0lh clamp(var(--padding), 2lh + 9vw, 10lh) 0lh;
}

/* --- Picture --- */


picture {

  display: flex;
  justify-content: center;
  /* Default horizontal alignment */
  align-items: center;
  /* Default vertical alignment */
  padding-bottom: 1lh;
}



/* --- Nav --- */

.navigation-links {
  position: absolute;

  display: flex;
  height: 100%;
  opacity: 0.5;
  width: 100%;
}

.navigation-links a {
  flex: 1;
}

.next-link {
  cursor: e-resize;

}

.prev-link {
  cursor: w-resize;

}

/* --- Footer --- */



footer {
  display: none;
  position: fixed;
  width: max-content;
  max-width: calc(100vw - calc(2* var(--padding)));
  bottom: 4vh;
  transform: translateX(-50%);
  left: 50%;
}

footer>a {
  display: inline-flex;
  gap: .5lh;
}


footer:hover .full-name {
  /* display: inline; */
  /* display: none; */
}

.image-count {
  /* background-color: red; */
  /* min-width: 6ch; */
  text-align: center;
}

footer:hover .image-count,
footer:hover .initials,
footer:hover .client {
  display: none;
}


/* --- Caption --- */


.initials {
  /* padding-right: .25lh; */
  /* display: none; */
  /* padding-right: 1lh; */
}

.client {
  /* padding-left: .25lh; */
  /* max-width: 100vw; */
}

.full-name {
  display: none;
}

.figure-caption {
  position: absolute;
  width: max-content;
  bottom: 4vh;
  transform: translateX(-50%);
  left: 50%;
}

.figure-caption>a {
  display: inline-flex;
  gap: 1lh;
}


/* .figure-caption:hover .full-name {
  display: inline;
}

.figure-caption:hover .image-count,
.figure-caption:hover .initials,
.figure-caption:hover .client {
  display: none;
} */


/* --- Double/Single --- */

.single {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.double {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* padding: var(--padding); */
  /* padding: 0 calc(var(--padding) * 2); */
}

/* --- Sizes --- */

picture .large {
  max-height: 75vh;
}

picture:has(.large.single) {
  /* padding: 0; */
}

picture .medium {
  max-height: 60vh;
}

picture .small {
  max-height: 33vh;
}

/* --- VERTICAL ALIGNMENT --- */
picture .top {
  align-self: flex-start;
}

picture .bottom {
  align-self: flex-end;
}

/* --- HORIZONTAL ALIGNMENT --- */

picture .left {
  margin-right: auto;
}

picture .right {
  margin-left: auto;
}



/* --------------- Responsive --------------- */


@media only screen and (max-width: 1200px),
only screen and (orientation: portrait) {
  body {
    /* background-color: lightblue; */
  }

  .project figure {
    display: contents;
  }

  footer {
    display: block;
  }

  .navigation-links,
  .all-pics,
  figcaption {
    display: none;
  }

  picture {
    /* positioned relatively for absolute positioning inside */
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;

    margin: 0 auto;

    position: relative;
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    padding: var(--padding);
    padding-bottom: 1.5lh;
  }

  .mobile-navigation-links {
    display: block;
    /* display: none; */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .mobile-navigation-links .prev-link,
  .mobile-navigation-links .next-link {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    cursor: w-resize;
  }

  .mobile-navigation-links .next-link {
    cursor: e-resize;
  }

  .mobile-navigation-links .prev-link {
    left: 0;
  }

  .mobile-navigation-links .next-link {
    right: 0;
  }

  figure .navigation-links {
    display: none;
  }

  /* --- SIZE CLASSES Mobile--- */

  picture .large {
    max-height: 70svh;
  }

  picture .medium {
    max-height: 70svh;
  }

  picture .small {
    max-height: 70svh;
  }

  /* --- VERTICAL ALIGNMENT Mobile --- */
  picture .top {
    align-self: center;
  }

  picture .bottom {
    align-self: center;
  }

  /* --- HORIZONTAL ALIGNMENT Mobile --- */

  picture .left {
    margin-right: 0;
  }

  picture .right {
    margin-left: 0;
  }

  img {
    padding: 0;
  }

  a {
    -webkit-tap-highlight-color: transparent;
  }
}