:root {
  --dark: #373349;
  /* --gap: 15px; */
  /* --width: 240px; */
  /* --height: var(--width); */
}

html,
body {
  /* background-color: var(--dark); */
}

.gallery-container {
  margin: var(--gap);
  background-color: #030f27;
  padding: 0 40px ;

  
}

h1 {
  display: flex;
  justify-content: center;
  color: aliceblue;
  padding: 20px;
  font-weight: 700;
}
img {
  width: 210px;
  height: 210px;
  padding: 10px;
}
/* .container > a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  overflow: hidden;
}

.container > a::after {
  content: '';
  background: linear-gradient(transparent, black);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: translateY(100%);
  transition-duration: 0.75s;
} */

.gallery-container  > a:hover::after {
  transform: translateY(50%);
}

/* .container > a > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-duration: 1s;
} */

  a:hover > img {
  transform: scale(1.05);
}

/* .container {
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--width), 1fr));
  grid-auto-rows: var(--height);
  grid-auto-flow: dense;
} */

.horizontal {
  grid-column: span 2;
}

.vertical {
  grid-row: span 2;
}

.big {
  grid-column: span 2;
  grid-row: span 2;
}

.lb-image{
  /* width:  100% !important;
  height: 100% !important; */
  background-color: white;
}