@import url("https://fonts.googleapis.com/css2?family=Cuprum:wght@400;500;700&display=swap");
.hidden {
  display: none;
}

.visible {
  display: flex;
  flex-direction: column;
}

@keyframes sectionMoveIn {
  0% {
    transform: translateY(-720px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes moveLeft {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-2000px);
  }
}
@keyframes moveFromLeft {
  0% {
    transform: translateX(-2000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes rotateArrowButton {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes shakeBox {
  0% {
    transform: scale(1);
  }
  25% {
    transform: rotate(15deg);
  }
  50% {
    transform: scale(1.2);
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(-15deg);
  }
  100% {
    transform: scale(1);
    transform: rotate(15deg);
  }
}
@keyframes showInfo {
  0% {
    transform: translateX(-2000);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes changeOpacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.portfolio-ludzie {
  padding-top: 120px;
}

.people {
  display: grid;
  grid-template-columns: repeat(4, minmax(300px, 1fr));
  grid-template-rows: repeat(5, minmax(400px, 1fr));
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  padding: 42px;
  place-content: center;
}
.people div {
  width: 100%;
  background-size: cover;
  position: relative;
  opacity: 0;
  transition: opacity 1.5s;
}
@media (max-width: 1400px) {
  .people div {
    width: 80%;
    place-self: center;
    background-position: center;
    background-position-y: center;
  }
}
.people div img {
  height: inherit;
}
.people div button {
  color: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1s;
  background: rgba(255, 255, 255, 0.446);
  padding: 18px 24px;
  font-size: 18px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.people div button:hover {
  background-color: white;
  color: black;
}
@media (max-width: 768px) {
  .people div button {
    opacity: 1;
  }
}
@media screen and (min-height: 1000px) and (max-width: 1250px) {
  .people div button {
    opacity: 1 !important;
  }
}
.people div:hover button {
  transition: opacity 1s;
  opacity: 1;
}
@media (max-width: 1400px) {
  .people {
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    padding: 32px 0px;
  }
}

.showDivWithImg {
  transition: opacity 1.5s;
  opacity: 1 !important;
}

.photobrowserImg {
  display: none;
}

.div1 {
  grid-area: 1/1/2/2;
  background-image: url("./../../assets/img/portfolio/ludzie/portfolio-grid-01.png");
  height: 500px;
}
@media (max-width: 1400px) {
  .div1 {
    height: 100%;
    grid-area: auto;
  }
}
@media (min-width: 1700px) {
  .div1 {
    height: 70vh;
  }
}

.div2 {
  grid-area: 1/2/2/3;
  background-image: url("./../../assets/img/portfolio/ludzie/portfolio-grid-13.jpg");
  height: 600px;
}
@media (max-width: 1400px) {
  .div2 {
    height: 80vh;
    grid-area: auto;
  }
}
@media (min-width: 1700px) {
  .div2 {
    height: 80vh;
  }
}

.div3 {
  grid-area: 1/3/2/5;
  background-image: url("./../../assets/img/portfolio/ludzie/portfolio-grid-03.png");
  height: 500px;
}
@media (max-width: 1400px) {
  .div3 {
    height: 80vh;
    grid-area: auto;
  }
}
@media (min-width: 1700px) {
  .div3 {
    height: 70vh;
  }
}

.div4 {
  grid-area: 2/1/3/2;
  background-image: url("./../../assets/img/portfolio/ludzie/portfolio-grid-12.jpg");
  margin-top: -100px;
}
@media (max-width: 1400px) {
  .div4 {
    height: 80vh;
    grid-area: auto;
    margin-top: 0px;
  }
}

.div5 {
  grid-area: 2/2/3/3;
  background-image: url("./../../assets/img/portfolio/ludzie/portfolio-grid-02.png");
}
@media (max-width: 1400px) {
  .div5 {
    grid-area: auto;
    height: 80vh;
  }
}

.div6 {
  grid-area: 2/3/3/5;
  background-image: url("./../../assets/img/portfolio/ludzie/portfolio-grid-06.png");
  margin-top: -100px;
}
@media (max-width: 1400px) {
  .div6 {
    height: 80vh;
    grid-area: auto;
    margin-top: 0px;
  }
}

.people .div7 {
  grid-area: 3/1/4/3;
  background-image: url("./../../assets/img/portfolio/ludzie/portfolio-grid-07.png");
  background-position-y: bottom;
  background-position-x: right;
}
@media (max-width: 1400px) {
  .people .div7 {
    height: 80vh;
    grid-area: auto;
    background-position: right;
  }
}

.people .div8 {
  grid-area: 3/3/4/5;
  background-image: url("./../../assets/img/portfolio/ludzie/portfolio-grid-08.png");
  background-position-y: bottom;
  background-position-x: right;
}
@media (max-width: 1400px) {
  .people .div8 {
    height: 80vh;
    grid-area: auto;
    background-position: right;
  }
}

.people .div9 {
  grid-area: 4/1/5/2;
  background-image: url("./../../assets/img/portfolio/ludzie/portfolio-grid-09.png");
  background-position-y: bottom;
}
@media (max-width: 1400px) {
  .people .div9 {
    height: 80vh;
    grid-area: auto;
    background-position-y: bottom;
  }
}

.div10 {
  grid-area: 4/2/5/3;
  background-image: url("./../../assets/img/portfolio/ludzie/portfolio-grid-10.png");
}
@media (max-width: 1400px) {
  .div10 {
    height: 80vh;
    grid-area: auto;
  }
}

.div11 {
  grid-area: 4/3/5/5;
  background-image: url("./../../assets/img/portfolio/ludzie/portfolio-grid-11.png");
}
@media (max-width: 1400px) {
  .div11 {
    height: 80vh;
    grid-area: auto;
  }
}

.div12 {
  grid-area: 5/2/5/3;
  background-image: url("./../../assets/img/portfolio/ludzie/portfolio-grid-05.jpg");
  background-position-x: left !important;
}
@media (max-width: 1400px) {
  .div12 {
    height: 80vh;
    grid-area: auto;
  }
}

.div13 {
  grid-area: 5/3/5/4;
  background-image: url("./../../assets/img/portfolio/ludzie/portfolio-grid-04.jpg");
}
@media (max-width: 1400px) {
  .div13 {
    height: 80vh;
    grid-area: auto;
  }
}