:root {
  --black: #000;
  --margin: 1rem;
  --white: #fff;
}

a {
  color: var(--black);
  text-decoration: underline;
}

sup {
  top: -.2rem;
}

.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main {
  margin: var(--margin);
  position: relative;
}

.body {
  background-color: var(--white);
  color: var(--black);
  letter-spacing: -.0125em;
  font-family: linotype-sabon, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 108%;
}

.header {
  z-index: 9999;
  margin-top: var(--margin);
  width: calc(100% - (var(--margin) * 2));
  position: fixed;
  top: 0;
}

.global-code {
  font-weight: 600;
}

.text {
  z-index: 30;
  max-width: 100%;
  margin-bottom: 0;
  line-height: 120%;
}

.text.data {
  width: auto;
  display: inline-block;
}

.project-container {
  padding-top: var(--margin);
  padding-bottom: var(--margin);
  grid-column-gap: var(--margin);
  grid-row-gap: var(--margin);
  border-top: 1px #000;
  flex-flow: column;
  display: flex;
}

.grid {
  grid-column-gap: var(--margin);
  grid-row-gap: var(--margin);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: 100%;
  display: grid;
}

.img {
  object-fit: cover;
  width: 100%;
  position: relative;
}

.img.img-cover {
  height: 100%;
}

.divider {
  color: var(--black);
  border: 1px #000;
  border-top: .3px solid #1f1f1f;
  border-bottom-color: #1f1f1f;
}

.divider.header-divider {
  margin-top: var(--margin);
}

.code-embed {
  width: 100%;
}

.logo {
  width: .4rem;
  height: .4rem;
  display: flex;
  position: relative;
}

.spacer-top {
  height: 21.8rem;
}

.video {
  z-index: 1;
  aspect-ratio: 4 / 5;
  width: 100%;
  height: auto;
}

.video._16-10 {
  aspect-ratio: 16 / 10;
  height: auto;
}

.video._16-10.darken {
  filter: brightness(94%);
}

.video._9-16 {
  aspect-ratio: 9 / 16;
  height: auto;
}

.video._16-9 {
  aspect-ratio: 16 / 9;
  height: auto;
}

.video.darken {
  filter: brightness(92%);
}

.darken {
  filter: brightness(96%);
}

@media screen and (max-width: 991px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .spacer-top {
    height: 24.3rem;
  }
}

@media screen and (max-width: 767px) {
  .header {
    width: auto;
    position: relative;
  }

  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .spacer-top {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .spacer-top {
    height: 30.3rem;
  }
}

#w-node-edcfd773-3fc9-23eb-0025-49dbe9c05169-31e2c121, #w-node-a9b19796-cb99-45c9-4edb-1892cd530ebc-31e2c121, #w-node-_4832c9df-1172-a58e-0992-b411e97a3348-31e2c121 {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-_9a3d0ff4-56ec-4997-637d-d4dd1f3dc788-31e2c121 {
  grid-area: span 1 / span 8 / span 1 / span 8;
}

#w-node-_8c2d3e16-ad01-6ee7-871e-7d03f8cf58ce-31e2c121, #w-node-ecb9135e-e6bf-19ab-ca88-cd5733c3b9c8-31e2c121, #w-node-a78f839d-fc0a-bfdc-7d5b-b6cfc26fdb31-31e2c121 {
  grid-area: span 1 / span 5 / span 1 / span 5;
}

#w-node-_783cfd47-f805-2bce-8085-be52122a368c-31e2c121 {
  grid-area: span 1 / span 12 / span 1 / span 12;
}

#w-node-_1b33805c-abb3-42af-8f78-5b73b18ae169-31e2c121 {
  grid-area: span 1 / span 5 / span 1 / span 5;
}

#w-node-fadd2d3f-3b51-dcb5-dbfb-a44d750bcd64-31e2c121 {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-_02ded2b3-e603-c081-9fba-63b5046c9547-31e2c121, #w-node-_02ded2b3-e603-c081-9fba-63b5046c9548-31e2c121 {
  grid-area: span 1 / span 6 / span 1 / span 6;
}

#w-node-_82dad171-05bf-a454-2be1-39a35909dfcb-31e2c121 {
  grid-area: span 1 / span 5 / span 1 / span 5;
}

#w-node-ed920374-99a6-3c48-628a-fc81ba1491c5-31e2c121 {
  grid-area: span 1 / span 6 / span 1 / span 6;
}

#w-node-b3bb3c50-5882-1e76-09b5-0800e552d5ff-31e2c121, #w-node-b3bb3c50-5882-1e76-09b5-0800e552d600-31e2c121 {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-_8c986bce-ee10-5e30-a140-2eef7a448d30-31e2c121 {
  grid-area: span 1 / span 12 / span 1 / span 12;
}

#w-node-_522c2bf7-b1ac-ec15-00bb-b27ce31c0a36-31e2c121, #w-node-_522c2bf7-b1ac-ec15-00bb-b27ce31c0a37-31e2c121 {
  grid-area: span 1 / span 5 / span 1 / span 5;
}

#w-node-f52ce6d0-e7aa-b84c-b9ef-b4469c0f683e-31e2c121 {
  grid-area: span 1 / span 8 / span 1 / span 8;
}

#w-node-e97e0202-2ec5-3325-1e68-7cf8d1c20b50-31e2c121 {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-e97e0202-2ec5-3325-1e68-7cf8d1c20b51-31e2c121 {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-_638cc068-b4cf-63ae-b84a-b8d12739913d-31e2c121 {
  grid-area: span 1 / span 6 / span 1 / span 6;
}

#w-node-_91c5911d-673a-4b87-2d42-9bcc2bc1b0e8-31e2c121 {
  grid-area: span 1 / span 8 / span 1 / span 8;
}

#w-node-_3ffb8c37-0cfe-d1b1-35db-7aa57239906a-31e2c121, #w-node-_3ffb8c37-0cfe-d1b1-35db-7aa57239906b-31e2c121 {
  grid-area: span 1 / span 5 / span 1 / span 5;
}

#w-node-_9021957b-a587-7acd-9f0b-cdf35f2cc291-31e2c121 {
  grid-area: span 1 / span 7 / span 1 / span 7;
}

#w-node-f8273685-b126-b9ee-7edf-3803be537add-31e2c121 {
  grid-area: span 1 / span 8 / span 1 / span 8;
}

#w-node-_6eb628da-66d6-e52e-d040-5c48d4140503-31e2c121 {
  grid-area: span 1 / span 6 / span 1 / span 6;
}

#w-node-_8b5fa7be-3b3c-913e-d6fd-470359f4f3cc-31e2c121 {
  grid-area: span 1 / span 8 / span 1 / span 8;
}


