#sectionPin {
  height: 100vh;
  overflow: hidden;
  display: flex;
  background: #111;
  color: #b9b3a9;
}

.pin-wrap {
  width: fit-content;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.scrollsection .item {
  flex-shrink: 0;
  margin-top: 45px;
  /* Nav: damit die Bilder in der Mitte der Seite sind */
  margin-right: 0.3em;
  margin-left: -2em;
  position: relative;
  cursor: pointer;
}

.scrollsection:first-child {
  margin-left: 20vW;
}

.scrollsection .item .image {
  position: relative;
  cursor: pointer;
}

.scrollsection .item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  /* filter: grayscale(1); */
  background-color: rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s;
  opacity: 1;
  z-index: 2;
}

.scrollsection .item:hover::before {
  opacity: 0;
}


/************************************************************/
/*	Bilder Lars: 1920 x 1282 = 1,4976 : 1
/*	width: 80vh : 1,4976 = 53.42vh;
/*	width: 60vh : 1,4976 = 40.06vh;
/*	width: 40vh : 1,4976 = 26.71vh;
/************************************************************/
.scrollsection>.item.big.vertical {
  width: 50vH;
}

.scrollsection>.item.big.horizontal {
  width: 50vW;
}

.scrollsection>.item.normal.vertical {
  width: 40vH;
  z-index: 1;
}

.scrollsection>.item.normal.horizontal {
  width: 40vW;
}

.scrollsection>.item.small.vertical {
  width: 30vH;
}

.scrollsection>.item.small.horizontal {
  width: 30vW;
}