:root {
  --col_bg: #F7F7F7;
  --col_text: #000;
  --border-radius: 2px;
  --spacing-15: 15rem;
  --spacing-25: 25rem;
  --spacing-38: 37.5rem;
  --spacing-50: 50rem;
  --spacing-75: 70rem;
  --spacing-100: 100rem;
  --spacing-125: 150rem;
  --spacing-150: 150rem;
  --spacing-175: 175rem;
  --spacing-200: 200rem;
}

body {
  padding: var(--spacing-50) var(--spacing-25) var(--spacing-50) var(--spacing-50);
}
body .desktop {
  display: none;
}
body .mobile {
  display: block;
}
@media (min-width: 769px) {
  body {
    padding: var(--spacing-50) var(--spacing-75) var(--spacing-50) var(--spacing-50);
  }
  body .desktop {
    display: block;
  }
  body .mobile {
    display: none;
  }
}

main nav h1 {
  margin-bottom: calc(var(--spacing-50));
}
main nav h2 {
  max-width: 24ch;
  margin-bottom: calc(var(--spacing-25));
}
@media (min-width: 769px) {
  main nav {
    position: sticky;
    top: var(--spacing-50);
    align-self: start;
  }
  main nav h1 {
    margin-bottom: calc(var(--spacing-200) + 84rem);
  }
  main nav h2 {
    margin-bottom: calc(var(--spacing-50));
  }
}
main nav button {
  display: block;
}

article > * {
  margin-bottom: var(--spacing-50);
}

figure.headerimage {
  aspect-ratio: 1.75;
  line-height: 0;
  overflow: hidden;
}
figure.headerimage.hasVideo {
  aspect-ratio: var(--vid_ratio);
}
figure.headerimage img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

section.desc {
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--spacing-50);
}
section.desc p {
  margin-bottom: 0;
}
section.desc > div:first-of-type {
  -moz-columns: 2;
       columns: 2;
  -moz-column-gap: 15rem;
       column-gap: 15rem;
}
@media (min-width: 1051px) {
  section.desc {
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-25);
    padding: var(--spacing-50) 0;
  }
  section.desc > div:first-of-type {
    -moz-columns: unset;
         columns: unset;
    align-self: start;
    position: sticky;
    top: var(--spacing-50);
  }
}
section.desc ul li {
  max-width: 20ch;
  margin-bottom: var(--spacing-15);
  margin-bottom: 12rem;
  line-height: 1.16;
}
section.desc ul li:last-of-type {
  margin-bottom: 0;
}

section.gallery figure {
  line-height: 0;
  aspect-ratio: var(--ratio);
}

section.credits {
  margin-bottom: var(--spacing-100);
}
section.credits > div {
  max-width: 18ch;
  margin-bottom: var(--spacing-15);
}
section.credits > div:last-of-type {
  max-width: unset;
  margin-bottom: 0;
}
@media (min-width: 769px) {
  section.credits {
    -moz-columns: 2;
         columns: 2;
    gap: var(--spacing-50);
    margin-bottom: var(--spacing-200);
  }
  section.credits > div {
    max-width: unset;
    margin-bottom: 0;
  }
}

section.sim h2 {
  margin-bottom: var(--spacing-25);
  max-width: 18ch;
}
@media (min-width: 769px) {
  section.sim h2 {
    max-width: unset;
    margin-bottom: var(--spacing-50);
  }
}
section.sim > div > a {
  margin-bottom: var(--spacing-25);
}
@media (min-width: 960px) {
  section.sim > div > a {
    margin-bottom: 0;
  }
}
section.sim figure {
  line-height: 0;
}
@media (pointer: fine) {
  section.sim figure picture {
    background: var(--col_item);
    transition: background 0.25s ease-in-out;
  }
  section.sim figure figcaption, section.sim figure img {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
  }
  section.sim figure:hover picture {
    background: transparent;
  }
  section.sim figure:hover figcaption, section.sim figure:hover img {
    opacity: 1;
  }
}
section.sim figure picture {
  aspect-ratio: 2/1.75;
  overflow: hidden;
  display: block;
  transition: background-color 0.15s ease-in-out;
}
section.sim figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.15s ease-in-out;
}
section.sim figure figcaption {
  line-height: initial;
  background: var(--col_bg);
  padding: var(--spacing-15) 0 0 0;
}/*# sourceMappingURL=project.css.map */