body {
  min-height: 200vh; }

main {
  padding-top: 0; }

@media (min-width : 900px) {
  header[data-color=light] {
    background-color: transparent;
    color: var(--white); }
  header[data-color=dark] {
    background-color: transparent;
    color: var(--black); } }

section.landing {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  top: 0;
  left: 0;
  margin-left: calc(var(--mainpad) * -1);
  margin-top: calc((var(--mainpad) + 1rem) * -1);
  transition: height 0.5s; }
  @media (min-width : 900px) {
    section.landing[data-color=light] {
      color: var(--white); }
    section.landing[data-color=dark] {
      color: var(--black); } }
  @media (max-width : 900px) {
    section.landing[data-color=light] .linkholder {
      color: var(--white); } }
  section.landing img {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 101%;
    height: 101%;
    object-fit: cover;
    object-position: center;
    z-index: -1; }
    @media (max-width : 900px) {
      section.landing img {
        top: 26em;
        bottom: 0;
        height: calc(100% - 26em); } }
    @media (max-height: 600px) and (orientation: landscape) {
      section.landing img {
        top: 50vh;
        height: 50vh; } }
  section.landing > div {
    position: absolute;
    bottom: var(--mainpad);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    column-gap: var(--mainpad);
    padding: calc(var(--mainpad) + 1rem) var(--mainpad) 0; }
    @media (max-width : 900px) {
      section.landing > div {
        grid-template-columns: repeat(4, 1fr);
        row-gap: calc(2 * var(--mainpad)); } }
    @media (max-width : 900px) {
      section.landing > div {
        display: flex;
        position: absolute;
        flex-direction: column;
        justify-content: space-between;
        height: calc(100% + 1rem);
        padding: 10rem var(--mainpad) var(--mainpad); } }
    section.landing > div h1 {
      grid-column: 1/5;
      font-size: var(--fontLarge);
      line-height: 1.2; }
    section.landing > div .lottie {
      grid-column: 7/13;
      grid-row: 1/2; }
    section.landing > div svg {
      grid-column: 7/13;
      grid-row: 1/2;
      width: 100%;
      height: auto;
      fill: currentColor;
      max-height: 70vh; }
    section.landing > div div.linkholder {
      grid-column: 1/5;
      align-self: end; }

section.featured {
  padding-top: 13rem; }
  @media (max-width : 900px) {
    section.featured {
      padding-top: 5rem; } }
  section.featured .featured-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    column-gap: var(--mainpad);
    margin-bottom: 10rem; }
    @media (max-width : 900px) {
      section.featured .featured-container {
        grid-template-columns: repeat(4, 1fr);
        row-gap: calc(2 * var(--mainpad)); } }
    @media (max-width : 900px) {
      section.featured .featured-container {
        margin-bottom: 2rem; } }
    @media (min-width : 900px) {
      section.featured .featured-container:nth-of-type(2n) .portrait {
        grid-column-start: 9; }
      section.featured .featured-container:nth-of-type(2n) .landscape {
        grid-column-start: 7; } }
  @media (min-width : 900px) {
    section.featured .project-card.portrait {
      grid-column-end: span 4;
      grid-column-start: 3; }
      section.featured .project-card.portrait .image-holder {
        height: 0;
        padding-bottom: 150%;
        position: relative; }
    section.featured .project-card.landscape {
      grid-column-end: span 6;
      grid-column-start: 1; }
      section.featured .project-card.landscape .image-holder {
        height: 0;
        position: relative;
        padding-bottom: 66.666666%; } }
  @media (max-width : 900px) {
    section.featured .project-card.portrait, section.featured .project-card.landscape {
      grid-column-end: span 4;
      grid-column-start: 1; }
    section.featured .project-card.portrait .image-holder {
      height: 0;
      padding-bottom: 150%;
      position: relative; }
    section.featured .project-card.landscape .image-holder {
      height: 0;
      position: relative;
      padding-bottom: 66.666666%; } }
  section.featured .project-card .image-holder {
    margin-bottom: 1rem; }
  section.featured .project-card img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
    filter: grayscale(1);
    transition: filter 0.5s var(--timing); }
  section.featured .project-card:hover img {
    filter: grayscale(0); }