.projects {
  height: 100vh;
  overflow: hidden;
  width: 100%;
  position: relative;
}
.works-section{
  margin-bottom:4rem

}
#image-track {
  display: flex;
  gap: 4vmin;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(0%, -50%);
  user-select: none;
  overflow: hidden;
}

.image {
  width: 40vmin;
  height: 56vmin;
  object-fit: cover;
  object-position: 100% center;
  transition: 0.4s;
  filter: grayscale(100%);
}
.image:hover {
  filter: grayscale(0%);
}
#image-track > div {
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1000;
  inset: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  gap: 1rem;
  transition: 0.3s;
  opacity: 1;
}
.overlay > a {
  color: #444;
  visibility: hidden;
  pointer-events: none;
  font-size: 3.6rem;
}
#image-track > div:hover .overlay {
  background-color: transparent;
}
#image-track > div:hover .overlay > a {
  visibility: visible;
  pointer-events: visible;
}
#image-track > div:hover .image {
  filter: grayscale(0%);
}
@media only screen and (max-width: 860px) {
  .primary-heading {
    max-width: 470px;
  }
  .primary-heading button {
    max-width: 470px;
    font-size: 6rem;
  }
  .shade {
    font-size: 30rem;
  }
  .summary {
    max-width: 470px;
  }
}
@media only screen and (max-width: 580px) {
  html {
    font-size: 58%;
  }
  #f-char {
    width: 10rem;
  }
}
@media only screen and (max-width: 460px) {
  html {
    font-size: 50%;
  }
  .primary-heading button {
    max-width: 470px;
    font-size: 5rem;
  }
  #f-char {
    width: 8rem;
    stroke-width: 120;
  }
}
@media only screen and (max-width: 380px) {
  html {
    font-size: 50%;
  }
}
#image-track {
  display: flex;
  gap: 10px;
  transition: transform 0.5s ease;
}

.image-wrapper {
  flex: 0 0 auto;
  width: 200px;
}

/* Slider controls */
/* #image-track[data-mouse-down-at="0"] {
  transform: translateX(0%);
}

#image-track[data-mouse-down-at="-1"] {
  transform: translateX(-100%);
}

/* Next slides */
/* #image-track[data-mouse-down-at="-2"] {
  transform: translateX(-200%);
}

/* Previous slides */
/* #image-track[data-prev-percentage="-100"] {
  transform: translateX(100%);
} */ */ */