.galerie{
  /* margin-top:300px;
  margin-bottom:300px; */
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:1rem;
}

.galerie-modala{
  background-color: rgba(0, 0, 0, 0.75);
  display:flex;
  flex-direction:row;
  justify-content: space-between;
  align-items: center;
  font-size:26px;
  font-family: Figtree;
  padding: 0 15px;
  user-select: none;
  z-index:30;

  opacity:0;
  visibility: hidden;

  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  
  position:fixed;
  inset: 0; /* teobog pro tip: in loc sa pun top bottom left right se poate folosi inset */
}

.galerie-modala.open-galerie{
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}


.galerie-modala-mijloc{
  height:100%;
  width:70%;
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
}

#galerie-modala-poza{
  height:10000px;
  max-height:80%;
  width:100%;
}

#galerie-modala-poza img{
  height:100%;
  width:100%;
  object-fit: contain;
}

#galerie-modala-nr{
  color:white;
  position:absolute;
  bottom:0.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  width:10%;
  text-align: center;
  
  display:flex;
  justify-content: center;
  align-items: center;
}

#galerie-sag-st, #galerie-sag-dr{
  display:flex;
  border-radius:100px;
  background-color: white;
  width:fit-content;
  height:fit-content;
  padding:4px;
  cursor:pointer;
}

#galerie-modala-x{
  display:flex;
  cursor:pointer;
  text-shadow: 0 0 6px black;
}

#galerie-modala-x{
  height:60px;
  width:60px;
  text-align: center;
  display:flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  top:2rem;
  right:2rem;

}

.galerie-container{
  user-select: none;
  padding:0;
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  row-gap:4%;
  column-gap:1%;

  width:95%;
  height: 450px;
}

.galerie-div-prev{
  width:19.2%;
  height:48%;
  border-radius:20px;
  overflow:hidden;
}

.galerie-container img{
  width:100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.galerie-container img:hover{
  transform:scale(1.1);
  filter: brightness(0.85);
  cursor:pointer;
}

@media screen and (max-width:700px) {
  .galerie-container{
    height:700px;
    column-gap:2%;

    row-gap:2%;
    width:100%;
    padding:0 5px;
  }

  .galerie-container div{
    width:49%;
    height:18.4%;
  }

  .galerie-modala{
    padding:0;
  }

  #galerie-sag-dr, #galerie-sag-st{
    transform: scale(0.75);
  }

  #galerie-modala-nr{
    width:40%;  
  }

  #galerie-modala-x{
    top:0.75rem;
    right:0.75rem;
  }
}