.circle {
    position: absolute;
    top: 36.5%;
    left: 18%;
    width: 10px;
    height: 10px;
    background-color: black;
    border-radius: 50%;
}
.page-description {
    position: absolute;
    top: 35.8%;
    left: 19%; 
    font-family: "SUIT-Regular";
    font-size: 1vw;
    font-weight: 600;
    color: black;
}
.number{
    position: absolute;
    top: 32%;
    right:24%;
    font-family: "Apercu mono";
    font-size:3vw;
    font-weight: 500;
    color: black;
    letter-spacing: -0.2vw;
}
.counting{
    position: absolute;
    top: 36%;
    right:18%;
    font-family: "Apercu";
    font-size: 1vw;
    font-weight: 500;
    color: black;
}
.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    grid-gap: 20px;
    position: relative;
    top: 36vh;   
    margin-left: 18%;
    margin-right: 18%; 
    padding: 40px 0;
    justify-content: center; 
}
.thumbnail {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    position: relative;
    width: 100%;
    padding-top: 100%; 
    overflow: hidden;
    background-color: #F0F0F0;
    cursor: pointer;
}
.thumbnail-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
} 
.thumbnail:hover .thumbnail-image {
    transform: scale(1.05);
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; 
    background: #F0F0F0;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.thumbnail:hover .overlay {
    opacity: 1;
}
.thumbnail .overlay .text {
    position: relative;
    font-family: "SUIT-Regular";
    font-size: 1vw;
    font-weight: 600;
    color: black;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.image-container {
    position: absolute;
    top: 12%; 
    left: 50%; 
    transform: translateX(-50%);
}
.image-container img {
    width: 80%; 
    height: auto; 
    transform: translateX(13%); 
}
@media screen and (max-width: 767px) {
  .image-container {
  position: absolute;
  top: 12%; 
  left: 50%;
  transform: translateX(-74%);
  }
  .image-container img {
  width: 120%; 
  height: auto; 
  transform: translateX(13%); 
  }
  .circle {
      position: absolute;
      top: 20.5%;
      left: 2%;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 50%;
  }
    .page-description {
      position: absolute;
      top: 19.8%;
      left: 5%;  
      font-family: "SUIT-Regular";
      font-size: 3vw;
      font-weight: 600;
      color: black;
  }
  .number{
      position: absolute;
      top: 20%;
      right:19%;
      font-family: "Apercu mono";
      font-size:4vw;
      font-weight: 500;
      color: black;
      letter-spacing: -0.2vw;
  }
  .counting{
      position: absolute;
      top: 20.8%;
      right:2.5%;
      font-family: "Apercu";
      font-size: 3vw;
      font-weight: 500;
      color: black;
  }
  .thumbnail-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); 
      grid-gap: 6px;
      position: relative;
      top: 17vh; 
      margin-left: 2%;
      margin-right: 2%; 
      padding: 40px 0;
      justify-content: center; 
  }}