.horizontal-scroll {
  height: 100vh;
  /* overflow: hidden */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  left: 0;
}

.pin-wrap {
  height: 100vh;
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.5rem;
  -webkit-column-gap: 1.5rem;
     -moz-column-gap: 1.5rem;
          column-gap: 1.5rem;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  overflow: hidden;
  /* will-change: transform */
}

@media (max-width: 1024px) {
  .pin-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
  }
}
/* p {
    position: absolute;
    bottom: 10vw;
    right: 10vw;
    width: 200px;
    line-height: 1.5;
  } */
.horscroll-first-section {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: auto;
  min-width: 75vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-top: 1.5rem;
  /* position: sticky */
  /* top: 0 */
  padding-bottom: 1.5rem;
}

@media (max-width: 1024px) {
  .horscroll-first-section {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
    min-width: 100%;
    height: 70svh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    /* position: sticky */
    /* top: 0 */
    padding-bottom: 1.5rem;
  }
}
.project-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  row-gap: 3rem;
  max-width: 24rem;
  margin-bottom: 1.5rem;
}

.info-grid-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.max-width-info {
  max-width: 20ch;
}

.is-gallery {
  font-size: 3rem;
}

.gallery-close-wrap {
  -ms-flex-item-align: start;
      align-self: flex-start;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 3;
}

.project-last-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: auto;
  min-width: 75vw;
  height: 100vh;
  height: 100svh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media (max-width: 1024px) {
  .project-last-section {
    height: 40vh;
    height: 40svh;
    width: 100%;
  }
}
.is-last-section {
  max-width: 80ch;
}

.gallery-image {
  width: auto;
  /* max-width: 100% */
  -o-object-fit: contain;
     object-fit: contain;
  height: 100vh;
  /* min-width: 60vw */
}

.horizontal-scroll .gallery-image {
  width: auto;
  /* Width automatically adjusts */
  height: calc(100vh - 3rem);
  /* Full viewport height */
  -o-object-fit: contain;
     object-fit: contain;
  /* Cover the figure area without stretching the image */
}

@media (max-width: 1024px) {
  .horizontal-scroll .gallery-image {
    height: auto;
    width: 100%;
  }
}
/* .paramask-hor {
    overflow: hidden;
    display: flex;
    width: 120%;
    overflow: hidden;
}

.paraimg-hor {
    flex-shrink: 0;
} */