body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "neue-haas-grotesk-text", sans-;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 19px;
    color: rgba(0,0,0,0.75);
  }

  a {
    text-decoration: none;
    color: rgba(0,0,0,0.75);
  }

  a:hover{
    color: rgba(0,0,0,0.45);
  }

  a.active{
    border-bottom: 1px solid rgba(0,0,0,0.75);
  }

  p {
    margin: 0;
    padding: 0;
  }

  img {
    margin: 0;
    padding: 0;
  }

  figure {
    margin:0;
    padding: 0;
  }

  .logo {
    position: fixed;
    padding: 20px 0 0 20px;
    z-index: 3;
  }

  .menu-mobile{
    display: none;
  }

  .menu {
    position: fixed;
    padding: 55px 0 0 20px;
    z-index: 1;
  }

  .menu-mobile {
    display: none;
  }

  .menu-mobile-button {
    display: none;
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .footer1 {
    position: fixed;
    padding: 0 0 20px 20px;
    z-index: 1;
    bottom: 0;
  }

  .footer2 {
    position: fixed;
    padding: 0 0 20px 20vw;
    z-index: 1;
    bottom: 0;
  }

  .slideshow {
    position: relative;
    width: auto;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    padding: 25px 0 0 20vw;
    cursor: pointer;
  }

  .slide img {
    height: 80vh;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }

  .caption {
    position: fixed;
    padding: 0 20px 20px;
    z-index: 1;
    bottom: 0;
    right: 0;
  }

  .mobile-gallery {
    display: none;
  }

  .text {
    padding: 20px 0 20px 20vw;
    width: 30vw;
    z-index: 0;
  }

  .text img{
    width: 30vw;
    height: auto;
  }

  .gradient-spacer {
    position: relative;
    height: 150px;
  }

  .gradient {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 150px; /* Height of the gradient */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 66%);
    z-index: 0; /* Ensure it stays above other content */
}

  .grid {
    padding: 24px 20px 20px 20vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 14px;
  }

  .grid img{
    width: 100%;
    height: auto;
    max-height: auto;
    margin: 0;
    padding: 0;
  }

  .grid figure{
    margin: 0;
    padding: 0;
  }






  @media only screen and (max-width: 767px) {

    body, html {
      font-size: 14px;
      line-height: 19px;
    }

    .logo {
      position: absolute;
    }

    .menu {
      display: none;
    }

    .menu-mobile {
      position: fixed;
      margin: 0;
      padding: 20px;
      left: 0;
      width: 100%;
      height: 100vh;
      font-size: 1.6em;
      line-height: 1.4em;
      background: white;
      z-index: 2000;
    }

    .menu-mobile-button {
      display: block;
      position: fixed;
      margin: 20px 20px 0 0;
      padding: 0;
      right: 0;
      z-index: 3000;
      cursor: pointer;
      /*color: var(--text-color);
      mix-blend-mode: difference;*/
    }

    .footer1-spacer {
      position: relative;
      padding: 36px 0 0 0;
    }

    .footer1 {
      position: relative;
      padding: 56px 20px 0 20px;
      bottom: auto;
    }

    .footer2 {
      position: relative;
      padding: 0 20px 10px 20px;
      z-index: 1;
      bottom: 0;
    }

    .slideshow {
      display: none;
    }

    .caption {
      display: none;
    }

    .mobile-gallery {
      display: block;
      max-width: 100%;
      padding: 10px 20px 10px 20px;
    }

    .mobile-gallery img{
      max-width: 100%;
      height: auto;
    }

    .mobile-caption {
      position: relative;
      padding-bottom: 10px;
    }

    .gradient-spacer {
      display: none;
    }

    .gradient {
      display: none;
    }

    .grid {
      padding: 20px 20px 20px 20px;
      grid-template-columns: repeat(1, 1fr);
    }

    .text {
      position: relative;
      padding: 20px 20px 20px 20px;
      width: auto;
      z-index: 0;
    }

    .text img{
      width: 100%;
      height: auto;
    }

    .slideshow {
      width: auto;
      height: auto;
      padding: 20px 20px 0 20px;
    }

    .slide img {
      height: auto;
      max-height: 67vh;
      width: auto;
    }

  }



  @media only screen and (min-width: 768px) and (max-width: 1200px) {
    body, html {
      font-size: 12px;
      line-height: 16px;
    }

    .grid {
      padding: 24px 20px 20px 33vw;
      grid-template-columns: repeat(2, 1fr);
    }

    .text {
      padding: 20px 0 20px 33vw;
      width: 50vw;
    }

    .footer2 {
      padding: 0 0 20px 33vw;
    }

    .slideshow {
      padding: 25px 0 0 33vw;
    }
  }



  @media only screen and (min-width: 1200px) and (max-width: 1440px) {


    .grid {
      padding: 24px 20px 20px 25vw;
      grid-template-columns: repeat(3, 1fr);
    }

    .footer2 {
      padding: 0 0 20px 25vw;
    }

    .text {
      padding: 20px 0 20px 25vw;
      width: 40vw;
    }

    .slideshow {
      padding: 25px 0 0 25vw;
    }
  }



  @media only screen and (min-width: 1800px) {

    .grid {
      padding: 24px 20px 20px 17vw;
      grid-template-columns: repeat(5, 1fr);
    }

    .footer2 {
      padding: 0 0 20px 17vw;
    }

    .text {
      padding: 20px 0 60px 17vw;
      width: 30vw;
    }

    .slide img {
      max-height: 800px;
    }

    .slideshow {
      padding: 25px 0 0 17vw;
    }
  }